Question

I’m following this advice to clear a FILE input in IE (specifically using the clone method, also described here, though I’ve also tried replacing with literal HTML). My goal was to have a “remove file” button in a custom styled upload control that would clear the input and “reset” it in such a way that it would be ready to receive another file.

The problem is (and in IE only, tested up to IE9), while I can clear the FILE input using this method, I can’t use a change event on the replaced FILE input. I suspect it is because the clone has the same ID as the original and both exist then in the DOM, but this is only a theory… Can this be worked around?

To hopefully illustrate/clarify the issue: this FIDDLE:

In all non-IE browsers,

1. Click “Add File” and select a file
2. value is filled in to the file field (which would normally be hidden from view)
3. “None Selected” is changed to “File Selected”
4. Click “Remove File” on the same line – everything is reset and ready to go again.
5. Click “Add File” and the process repeats normally

In IE,

1. 1-4 above the same
2. Click “Add File” again and the new file can be selected, but the subsequent actions (3-4) don’t occur again

Is there a solution to this that works in “all” browsers?

Answer 1

You can use this for now and make it better, it is just a proof of concept

http://jsfiddle.net/9LWPA/4/

I basically remove the the whole section then add it again but the click handler don’t work since it is added after the handler is defined so all I did was copy the entire click handler section and put it in the clean file function. I am sure you can make this a bit better.

Actually use this http://jsfiddle.net/9LWPA/5/ I made it a bit cleaner. It sure does not seem that efficient but at least it works, tested on IE 9 Mac VM

Update – moved the new click handlers to IE only http://jsfiddle.net/9LWPA/6/