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?

I tried Mark Allen technique and it worked very well for IE6,7,8, FF, Chrome and Safari (windows). Thanks — user102050
– user102050, Commented Dec 21, 2009 at 12:48

Mark Allen · Accepted Answer · 2009-02-09 17:03:32Z

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");

answered Feb 9, 2009 at 17:03

Mark Allen

7264 silver badges3 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

sjbwylbs Over a year ago

Current in Chrome version 23.0.1271.101 is still fail now.

Sanjeev Over a year ago

Thanks Mark, this is an good solution . I was facing same problem with IE8.

Tom Over a year ago

This is a good approach - simply move the input to the desired place and then recreate it

Muhammad Omer Aslam Over a year ago

in chrome it does not work, the file browse button is never displayed, although the element is cloned and can be seen in the source code

user19302 · Accepted Answer · 2009-01-06 04:44:14Z

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

:)

answered Jan 6, 2009 at 4:44

user19302

4 Comments

Anti-Dentite Over a year ago

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.

Sophie Alpert Over a year ago

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.

user19302 Over a year ago

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) :)

Triynko Over a year ago

Ridiculous that there's NO WAY to clone a file input element and preserve the already-selected value.

Gabriel · Accepted Answer · 2012-12-24 00:50:32Z

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)

answered Dec 24, 2012 at 0:50

Gabriel

9639 silver badges8 bronze badges

Comments

Timofey Inchagov · Accepted Answer · 2015-06-23 10:56:11Z

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.

answered Jun 23, 2015 at 10:56

Timofey Inchagov

1

Collectives™ on Stack Overflow

Clone a file input element in Javascript

4 Answers 4

4 Comments

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related