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

Question

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?

I have the same concept and the same symptoms. Looks like the brute solution is to fileupload('destroy') and reapply after each ajax done event. Did you solve it another way? — vatavale
– vatavale, Commented Mar 23, 2016 at 14:09

vatavale · Accepted Answer · 2016-03-25 03:08:53Z

9

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:

Trigger click event on new file-input after each blueimp add event.
Use replaceFileInput: false on plugin setup (this will degrade UX at some browsers). (docs)

edited Mar 25, 2016 at 3:08

answered Mar 23, 2016 at 15:35

vatavale

1,63023 silver badges34 bronze badges

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

1 Comment

Art Geigel Over a year ago

Awesome. Answer is dead on right. I had nearly identical issue. Once I called "trigger" event on the new cloned object instead (which was easy to get using same class selector) all was perfect and worked fine. Old code was $btn_choose_real.trigger("click") where $btn_choose_real was a reference to the first file object. New code was $(this).closest(".container").find(".real-upload").trigger("click").

peterpeterson · Accepted Answer · 2014-07-15 15:40:54Z

0

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();

answered Jul 15, 2014 at 15:40

peterpeterson

1,3262 gold badges15 silver badges41 bronze badges

5 Comments

Michał Leszczyński Over a year ago

I have tried this and unfortunately it did not help.

Michał Leszczyński Over a year ago

Does basic version of plugin require some formalized json answer?

peterpeterson Over a year ago

Yes, it should be something like:{"files":[{"url":"","thumbnailUrl":"","type":"image/png","size":1203,"deleteUrl":"?delete=true","deleteType":"DELETE"}]}

peterpeterson Over a year ago

If you use the php file that is provided with the plugin you won't have any headache.

Michał Leszczyński Over a year ago

I am not using PHP, so I can't use it unfortunately, I thought that only UI version requires some formalized json response. I will change my backend then.

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related