2

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?

Community
  • 1
  • 1
k3davis
  • 985
  • 12
  • 29
  • Tried it on my mac VM IE 9, the click of the add file button triggers but once the file is added, nothing happens, the next field does not show – Huangism Jul 05 '12 at 13:19
  • Thanks for noting that - I've hopefully clarified my question to account for where the expected behavior more precisely stops working. – k3davis Jul 05 '12 at 13:27
  • take a look at my answer, it solves the problem but maybe could be improved – Huangism Jul 05 '12 at 13:40
  • Have you seen jQuery Multiple File Upload Plugin http://www.fyneworks.com/jquery/multiple-file-upload/ – Martin Jul 05 '12 at 14:17

1 Answers1

0

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/

Huangism
  • 16,278
  • 7
  • 48
  • 74
  • This does seem to "fix" the issue in IE, but introduces weirdness in Chrome (tested on v20) and Firefox. If you add a file then remove it, then add another, the click event on the file input fires twice (select the file then the file selection box reopens). In some scenarios I've had it come up several times in a row. This is a good start though I may be able to use. – k3davis Jul 05 '12 at 15:07
  • @k3davis ok so if it fixes it on ie then target it to IE only, updated my fiddle so it is IE only fix – Huangism Jul 05 '12 at 15:09
  • There's still some oddity in this but as you mentioned, it's a fix that works and perhaps can be improved. Thanks for your help. – k3davis Jul 05 '12 at 17:57
  • @k3davis if you find more issues with this, you can post another question, eventually all the bugs will be sorted – Huangism Jul 05 '12 at 18:24