Empty file input from .clone()

Question

I'm trying to clone a file input form, which every time I select a file then click "add more" to clone the file input, but it has copied the selected file in the input.

<input type="file" />
<span id="add-more-files">Add more</span>

jQuery:

$('#add-more-files').click(function()
{
   var cloned = $(this).prev().clone();
   $(cloned).insertBefore($(this));
});

Demo: jsFiddle.

Now whenever you select a file before cloning the previous, you can see it has the same file selected, I need it to be empty when cloned.

EDIT:

How would I be able to clone this, referring to Neal's answer?

<div class="wrap"><input type="file /></div>
<span id="add-more-files">Add more</span>

what browser are u using? in chrome it gets emptied

Naftali
– Naftali

2011-04-08 17:28:58 +00:00
Commented Apr 8, 2011 at 17:28 — Naftali
– Naftali, Commented Apr 8, 2011 at 17:28

Naftali · Accepted Answer · 2011-04-08 17:46:42Z

1

what you can try is:

$('#add-more-files').click(function()
{
   var cloned = $(this).prev().clone();
   cloned.val(null);
   $(cloned).insertBefore($(this));
});

UPDATE
or if all the inputs will be copies from the previous just create a new one instead of cloning:

$('#add-more-files').click(function()
{
   var cloned = $(this).prev();
   $('<input>',{type:cloned.attr('type')}).insertBefore($(this));
});

edited Apr 8, 2011 at 17:46

answered Apr 8, 2011 at 17:31

Naftali

147k41 gold badges247 silver badges304 bronze badges

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

8 Comments

Richard Marskell - Drackir Over a year ago

This won't work, you can't edit the value of an <input> of type file for security reasons.

Richard Marskell - Drackir Over a year ago

His original code doesn't use .val() on an <input> of type file.

Naftali Over a year ago

@Drackir my new part has nothing to do with val()

Richard Marskell - Drackir Over a year ago

You should remove the first part since it doesn't work. The second one should work for what the Asker wants. Also, you don't need to clone the object or wrap this in insertBefore(). Good idea. :)

MacMac Over a year ago

Pretty good piece of code. Have you tried having a parent wrap (div) and cloning it?

|

user247702 · Accepted Answer · 2012-08-30 09:40:42Z

The only workable solution I found is to provide the file input field as a template that is hidden. Then a clone is created after the page is loaded to provide the first field.

It also works without an "add more" button, instead it adds a new file input field when the last one is filled in.

<div id="files">
    <input type="file" name="files" style="display: none;">
</div>

function AddUploadElement()
{
    var newUploadElement = $("#files").children(":first-child").clone();
    newUploadElement.css("display", "");

    $("#files").append(newUploadElement);
}

$(document).ready(function ()
{
    AddUploadElement();

    $("#files").on("change", "input", function ()
    {
        if ($(this).is(":last-child") == true)
        {
            AddUploadElement();
        }
    });
});

The cloning part is important because the template input field might have additional attributes.

benedict_w · Accepted Answer · 2013-04-12 15:40:07Z

0

The jquery.fileupload plugin circumvents the issue of clearing file inputs like this:

var inputClone = input.clone(true);
$('<form></form>').append(inputClone)[0].reset();
input.after(inputClone).detach();

i.e. clone the input, append to a temporary form to reset it, and detach the input so that it can be appended to forms consecutively.

then you can input.replaceWith(inputClone);

edited Apr 12, 2013 at 15:40

answered Apr 12, 2013 at 15:33

benedict_w

3,6282 gold badges35 silver badges51 bronze badges

Collectives™ on Stack Overflow

Empty file input from .clone()

3 Answers 3

8 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related