Blueimp jQuery-File-Upload Second File Upload Problem

Question

I am using the Blueimp jQuery-File-Upload plugin (basic version) and I have a problem. The first file download works as expected, but when I want to send another file, it does not work.

fileinput.fileupload({ dataType: 'json', done: function (e, data) { $.each(data.result.files, function (index, file) { //do stuff with files }); } }).bind('fileuploadadd', function (e, data) { data.context = $('<p/>').text('Uploading...').appendTo(document.body); data.submit(); }); 

EDIT:

Ok, I know what causes the problem. But I do not know how to fix it. I used the fileupload plugin in the input, which set the display to none. I launch it with another button that uses the click () / trigger ('click') method for hidden input. the first trigger works fine, but the second starts the file selection dialog. After the selection, nothing happens. When I use the input field directly, it works as it should. How to overcome this problem?

Answer 1

The problem arises due to the fact that jQuery-File-Upload clone and replace the input field after each download ( docs ).

So, you fire the click event on the old file input tag, which no longer works.

To solve this problem, you have at least two options:

• click trigger event when a new file is entered after each sync add event.

• Use replaceFileInput: false to configure the plugin (this will degrade the UX in some browsers). ( docs )

Answer 2

It’s hard to answer as there isn’t enough information, but something like this might work:

 function test() { fileinput.fileupload({ dataType: 'json', done: function (e, data) { $.each(data.result.files, function (index, file) { //do stuff with files }); } }).bind('fileuploadadd', function (e, data) { data.context = $('<p/>').text('Uploading...').appendTo(document.body); data.submit(); test(); }); } test();