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?

Monteria

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? – Empurple

Answer 1

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)

Empurple

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"). – Inside

Answer 2

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

Woodcut

I have tried this and unfortunately it did not help. – Caribbean

Does basic version of plugin require some formalized json answer? – Caribbean

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

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

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. – Caribbean