Search code examples
jqueryjquery-file-uploadblueimp

Blueimp's jQuery-File-Upload Second file upload issue

I am using Blueimp's jQuery-File-Upload plugin (basic version) and I have an issue. First file upload is working as expected, but when I want to send another file it is not working.

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 is causing an issue. But i do not know how to fix this. I have used fileupload plugin on input that has set display none. I trigger it with another button which uses click()/trigger('click') method on hidden input. first trigger works fine, but second one triggers select file dialog. After choosing nothing happends. When i use input field directly it works as it should. How to overcome this issue?

Solution

  • The problem appears because jQuery-File-Upload clone and replace input field after each uploading (docs).

    So you triggering click event on the old file-input tag, which is not working any more.

    To solve this you have at least two options:

    1. Trigger click event on new file-input after each blueimp add event.

    2. Use replaceFileInput: false on plugin setup (this will degrade UX at some browsers). (docs)