jQuery File Upload not working when file input dynamically created

Question

i am using this jquery uploader (http://blueimp.github.io/jQuery-File-Upload/basic.html) and it works fine when the file input is put in the raw code of the site, however i

Answer 1

This is because you bind fileupload event before element is added.

Try moving your code into callback function which will be executed after you create input element. Since appendTo() doesn't support callback, you can use each(callback):

$('code_that_you_append').appendTo('some_element').each(function () {
    // here goes $('.fileupload').fileupload({ ... }) function
});

If you need to bind event to .fileupload in multiple places in code, you can create a function to avoid code repetition, like this:

function bindFileUpload() {
    $('.fileupload').fileupload({
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                alert(file.name);
            });
        }
    });
};

and then call it in the callback, like before:

$('code_that_you_append').appendTo('some_element').each(function () {
    bindFileUpload();
});

I've created a little demo. It binds click instead of fileupload to simplify things (fileupload is external plugin...), but the general rule stays the same.

Answer 2

N.B: Please see accepted answer first.

I think accepted answer has little mistake. I just trying to recover that. On @Michał Rybak little demo you will see that every time we click add item another click event also will be added to previous added new link( add more then new link and see first new link show alert number of time new item). Because every time it add new link we again add click event to all new link elements.

 $('<p><a href="#" class="link">new link</a></p>').appendTo('body').each(function () {
      // bindClickToLink call every 'new link' and add click event on it
        bindClickToLink();
    });  

To solve that issues, instead add click event to all item we just add to newly created item. Here is my solution my demo .

Answer 3

You need to use the jQuery live() function.

This tip I found worked for me.

jQuery fileupload for dynamically added input field

Answer 4

Just bind the upload function with a static identifier at first. Here, 'document' is the static identifier. You can use anything like this that has not been added dynamically. Usually, document is used more often.

$(document).on('click', '.fileupload', function () {
    $('.fileupload').fileupload({
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                alert(file.name);
                //$('<p/>').text(file.name).appendTo(document.body);
            });
        }
    });
});