20

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?

Anti-Dentite
  • 205
  • 1
  • 2
  • 7
  • I tried Mark Allen technique and it worked very well for IE6,7,8, FF, Chrome and Safari (windows). Thanks –  Dec 21 '09 at 12:48

4 Answers4

67

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");
Mark Allen
  • 726
  • 4
  • 3
9

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

:)

  • 5
    Thank you for the quick reply, but to clarify (I don't know if it matters), I'm not trying to edit the form field in any way, I only need to clone it. Okay, well I do need to edit it later by changing the element id/name, but I don't see that as being a security risk. – Anti-Dentite Jan 06 '09 at 04:50
  • When jQuery clones the element, it needs to make a new one and set the value - the browser can't tell the difference between that and setting it outright. – Sophie Alpert Jan 06 '09 at 05:11
  • You can change the ID and name as much as you would like. You just can't edit the "value" of the element (which, like soprano said, JQuery does in the background on your behalf) :) –  Jan 06 '09 at 05:22
  • 2
    Ridiculous that there's NO WAY to clone a file input element and preserve the already-selected value. – Triynko Aug 02 '17 at 20:52
2

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)

Gabriel
  • 964
  • 9
  • 8
0

You can apply other method. You have to send real element to an iframe and cloned elements insert to form. For example:

$("INPUT[type='file']").each
(
    function(index, element)
    {
    $(this).wrap("<div></div>");
    var Div = $(this).parent();
    $(this).appendTo("FORM[name='forIframe']"); // This form for iframe
    Div.append($(this).clone());
    }
);

If you use this method your form will send file to a server, but only one note, in Chrome an IE inputs with files is reseted.

Timofey Inchagov
  • 1