Clone a file input element in Javascript

Question

I have a file input element that needs to be cloned after the user has browsed and selected a file to upload. I started by using obj.cloneNode() and everything worked fine, that is until I tried using it in IE.

I've since tried using jQuery's clone method as follows:

var tmp = jQuery('#categoryImageFileInput_'+id).clone();
var clone = tmp[0];

Works as expected in FireFox, but again not in IE.

I'm stuck. Anyone have some suggestions?

Answer 1

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

:)

Answer 2

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 element
var 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 it
real.appendTo("#some-hidden-form");

Answer 3

Blockquote// 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"); Blockquote Ok, This seems like what I am after. I am working on a MOD for SMF and I'm totally stuck since this tag wraps around the entire template function. I have managed to build a form via Javascript and submit it on the fly (that is as soon as the users clicks on upload, however, it is not submitting the , so using isset($_REQUEST['image']) will return nothing. $_FILES does not return anything also.

I'm lost in your code that you have posted. Although it is short, I'm confused as to where we are supposed to edit it with our sites info??? Perhaps you can point out the lines of code that need to be edited for this to work??

Thanks a million

Answer 4

I tried Mark Allen technique and it worked very well for IE6,7,8, FF, Chrome and Safari (windows). Thanks