/    Sign up×
Community /Pin to ProfileBookmark

File Upload click() clears at submission

Copy linkTweet thisAlerts:
Jul 17.2008

Hi guys,
I’m trying to call the click() function of a upload file object. When I submit the page after click on that button and picking file to upload. It clears the file object value and does not submit the page. Anyone had that same issue before? see my code below cannot figure out what’s wrong.
😮
PS : that issue is with IE7, in Firefox it’s another problem. but one at the time

<html>
<body>
<form name=frm enctype=”multipart/form-data” action=”upload.jsp” method=”POST”>
File<input name=”uploadedfile” type=”file”>
<input type=button onClick=”uploadedfile.click();” value=”Fake It”>
<input type=”submit” value=”upload”>
</form>
</body>
</html>

to post a comment
JavaScript

10 Comments(s) ↴

Copy linkTweet thisAlerts:
@toicontienJul 17.2008 — You aren't declaring a variable in JavaScript for "uploadedFile". Is this all your code? You might be running into a security issue. Browsers are very particular about the file upload field.
Copy linkTweet thisAlerts:
@slaughtersJul 17.2008 — Try

<input type=button onClick="uploadedfile.click();[B]return false;[/B]" value="Fake It">

To prevent your form from being submitted when you click the "Fake It" button.

But- like toicontien said, too little info and disjointed sentences ([I]"When I submit the page after click on that button and picking file to upload"[/I]?) make it difficult to figure out how to help you.
Copy linkTweet thisAlerts:
@cohanaauthorJul 17.2008 — You can see that example in action on http://www.cohana.com/tmp/tmp.htm click on "Fake It", Pick a file then click upload. You'll see the problem.

Try with IE on firefox it's a different problem.
Copy linkTweet thisAlerts:
@toicontienJul 17.2008 — Some links to get you started:

JavaScript basics at W3Schools

JavaScript, DOM, and the Humble FORM

You are using a variable called "uploadedfile" but you have not declared it. It appears starting with the basics of JavaScript and the document object model are where you should start.
Copy linkTweet thisAlerts:
@cohanaauthorJul 17.2008 — I'm sorry It does not make sense for me. I never declare form element before and it worked fine before. I thought only element that have an ID are variables not forms elements (unless they have an ID).

I did declare it as vraiable anyway just to try it and still having same issue. Maybe I did it wrong. It's on http://www.cohana.com/tmp/tmp.htm or just see code below.

<html>

<body>

<script>

var uploadedfile;

</script>

<form name=frm enctype="multipart/form-data" action="upload.jsp" method="POST">

File<input name="uploadedfile" type="file">

<input type=button onClick="uploadedfile.click(); return false;" value="Fake It">

<input type="submit" value="upload">

</form>

</body>

</html>


PS : these links you sent did not really help. Sorry
Copy linkTweet thisAlerts:
@toicontienJul 17.2008 — First you need to get a node reference to the form field and store it as a variable. Your code can be better written as:
&lt;html&gt;
&lt;body&gt;
&lt;form name=frm enctype="multipart/form-data" action="upload.jsp" method="POST"&gt;
File&lt;input name="uploadedfile" type="file"&gt;
&lt;input type="button" onclick="[B]this.form.elements.uploadedfile.click();[/B]" value="Fake It"&gt;
&lt;input type="submit" value="upload"&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
Secondly, I think you might start running into browser security problems. The file upload field already has a button, so I'm not sure why you need another. Is it so you can have a button in a different language?
Copy linkTweet thisAlerts:
@cohanaauthorJul 17.2008 — nope ... still does not work. I understand that that code is more accurate but it's the same. The browsing popup worked before as well as IE is forgiven for that kind of stuff. I'm still at the same point. You can see it at http://www.cohana.com/tmp/tmp.htm

?
Copy linkTweet thisAlerts:
@cohanaauthorJul 22.2008 — I assume nobody knows that answer.

?
Copy linkTweet thisAlerts:
@felgallJul 22.2008 — What does clicking on the file upload field itself do? Probably nothing and so triggering that event will do the same thing. Not all browsers give the file upload field a button and ytou certainly can,t distinguish between clicking on the text field where the filename appears and clicking on the button (if there is one) when triggering that event.
Copy linkTweet thisAlerts:
@rnd_meJul 22.2008 — I assume nobody knows that answer.

?[/QUOTE]

ooo i know!

browsers ignore js-based click commands on file-type inputs.

setting the .value has no effect either.

this is intentional as a security measure. the user must [U]really [/U]click on the input, or the assessed value is null.

had the same problem a while back.

i guess since forms can be submitted via script, the file input restriction is the only thing preventing a script from uploading user files without permission.
×

Success!

Help @cohana spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.27,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...