Why Blueimp's JQuery File Upload add all prev. selected files even if options [replaceFileInput: false] and [maxNumberOfFiles: 1] are set on init?

Question

I have just normal form with some input fields and one file input field. I use the Blueimp's Jquery File Upload plugin to upload a file. It seems to work, if you select a file and after that click the upload button. But if you reselect files to upload, it saves all the prehistory of selections and after upload sends all the XHRs to the server.

I want to upload only one currently selected file, not all the previously selected files (in file open dialog).

Here is my js module to handle the upload:

$(function () {
    $('#upload_form').fileupload({

        dataType: 'json',
        autoUpload: false,
        fileInput: '#filechose_button',
        replaceFileInput: false,
        maxNumberOfFiles: 1,
        multipart: true,

        add: function (e, data) {

            $('#upload_button').click(function () {

                $('#upload_button').attr('disabled', true);
                ...
                data.submit();
                ...
            });
        },

        done: function (e, data) {
          ... // successfully uploaded
        },

        progressall: function (e, data) {
          ... // update a progress bar
        }
    });
});

The solutions I found here (How to upload a file only once with blueimp file upload plugin?) seems to be not the best way (I see it as dirty), because just unbinding the click event still doesn't solve the problem of collecting all previously selected files (kind of memory leaks)

The option maxNumberOfFiles: 1 doesn't work for me.

Answer 1

I had the same problem, my solution was to unbind the click event of my button and bind it back whenever the add event is called. Try This.

...

add: function (e, data) {

        $('#upload_button').unbind('click');
        data.context = $('#upload_button').bind('click', function () {
                    ...
                    data.submit();
        }
}