Question

I’m handling the “onChange” event of an HTML input file field by using jQuery’s “change” function. This works as intended, and does indeed trigger when the element’s value changes. However, not in the following scenario:

1. The user specifies a file to upload. We call this file “file.dat”.

2. jQuery later sets the value of the file field to “”, by using the
   val-function.

3. The user specifies the exact same file to upload, “file.dat”.

In the above scenario, “onChange” doesn’t get called at step 3. However, if the user at step 3 specifies a different file, it does indeed get called.

Is it because I am using jQuery’s val-function to change the value? What other alternatives do I have if I want to reset the input file field to its base/default value?

Answer 1

For security reasons, JavaScript is unable to affect the value of a file input. It does appear that the value has been cleared, but it hasn’t really.

You can get around this by either resetting the entire form, or creating the element again and inserting it into the DOM, in place of the old one.

Here’s a working example. Note the use of the jQuery live function to bind the change event. This is required because we are inserting a new element into the DOM every time the Clear button is clicked.