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.

Bruner

there are no "memory leaks". Try to add 2 files, and before you upload them, delete one of them from the file system. The file will not be uploaded - the browser saves the path to the files, not the files themself. – Thackeray

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

Moreau

yep, but that is the same as the solution I mentioned does. Strange why the option maxNumberOfFiles doesn't work. But ok, it works and actually I can implement the semantics of the maxNumberOfFiles option myself: if (number of bindings with added files more then maxNumberOfFiles) unbind the first binding (kind of a FIFO Queue with boundaries). Anyway good, that the solution is instinctive for many people :) – Bruner

if you unbind it to the plugin, you won't be able to use it any more? – Tiptoe

Allan, the plugin isn't bound to that button, it's arbitrarily specified in the add function. – Revival

In addition to the answer you may want to name the handler, because when remove by using unbind('click') it will remove all handlers attached not just the one you added, if you were to bind to a named handler however, like $('#upload_button').bind('click', myNamedHandler) you can safely remove it by specifiying it in the unbind method $('#upload_button').unbind('click', myNamedHandler) and it won't affect any other handler bound to that button (see api.jquery.com/unbind) – Revival