HTML5 File Upload Input - onChange

Question

When the user selects files to be uploaded I present one of two buttons to take action on the file(s) based on how many files there are. I get the number of files by including an onchange=getNumFiles(this) in the file input tag.

My problem is that I hide the button to take action on the files after the user clicks it, and if the user selects the same file(s) a second time the button is not "re-presented". This is happening because the file upload input never actually changed because the input is still holding the original file selection. How can I account for this?

Is there a way to clear the contents of the file upload input? I've tried setting the value to null to no avail. Or is there a different event other than onchange that I should be using? hope this makes sense....

Possible duplicate of How can I clear an HTML file input with JavaScript? — Fraser
– Fraser, Commented Aug 24, 2017 at 9:46

user400654 · Accepted Answer · 2013-09-11 19:13:26Z

2

"Is there a way to clear the contents of the file upload input"

Yes, call .reset() on the form.

$("#myform")[0].reset();

Now if the same file is selected again it will correctly trigger a change event since it changed from nothing to something again.

answered Sep 11, 2013 at 19:13

user400654

95.1k16 gold badges168 silver badges188 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

A.O. Over a year ago

one question, why exactly do you need the array notation [0] to reference forms?

user400654 Over a year ago

Because jQuery doesn't have a .reset() method. .reset is a native method that all forms have, it normally gets called when a <button type="reset">Reset</button> is clicked, it resets all inputs back to their default values.

user400654 Over a year ago

the only other way to clear a file input is to clone it or remove it and create a new one. you have little to no access to the value of a file input.

Collectives™ on Stack Overflow

HTML5 File Upload Input - onChange

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related