7

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.

Community
  • 1
  • 1
static
  • 8,126
  • 15
  • 63
  • 89
  • 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. – Dirty-flow May 03 '13 at 08:57

1 Answers1

8

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();
        }
}
Jean-Bernard Pellerin
  • 12,556
  • 10
  • 57
  • 79
Charkm4
  • 96
  • 1
  • 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 :) – static May 03 '13 at 20:09
  • if you unbind it to the plugin, you won't be able to use it any more? – Allan Ruin Apr 02 '14 at 09:48
  • Allan, the plugin isn't bound to that button, it's arbitrarily specified in the add function. – nickbw May 30 '14 at 03:41
  • 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 http://api.jquery.com/unbind/) – nickbw May 30 '14 at 03:45