Clone a file input element in Javascript

Guessing that you need this functionality so you can clone the input element and put it into a hidden form which then gets POSTed to a hidden iframe...

IE's element.clone() implementation doesn't carry over the value for input type="file", so you have to go the other way around:

// Clone the "real" input elementvar real = $("#categoryImageFileInput_" + id);var cloned = real.clone(true);// Put the cloned element directly after the real element// (the cloned element will take the real input element's place in your UI// after you move the real element in the next step)real.hide();cloned.insertAfter(real);   // Move the real element to the hidden form - you can then submit itreal.appendTo("#some-hidden-form");

Editing the file form field is a security risk and thus is disabled on most browsers and should be disabled on firefox. It is not a good idea to rely on this feature. Imagine if somebody was able, using javascript, to change a hidden file upload field to, lets say,

c:\Users\Person\Documents\Finances

Or

C:\Users\Person\AppData\Microsoft\Outlook.pst

:)

In jQuery fileupload widget there is a file input replace method to get around the change event listener only firing once.

https://github.com/blueimp/jQuery-File-Upload/blob/master/js/jquery.fileupload.js#L769

(_replaceFileInput method in jquery.fileupload.js)