CODEWITHSUNDEEP
jqueryjquery-file-uploadblueimp
Michał Leszczyński
Michał Leszczyński

Reputation: 356

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?

Upvotes: 7

Views: 2596

Answers (2)

vatavale
vatavale

Reputation: 1620

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)

Upvotes: 9

peterpeterson
peterpeterson

Reputation: 1325

Is difficult to reply as there is not enough information but something like this may 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();

Upvotes: 0

Related Questions