Cannot remove files from file list using JQuery-File-Upload

Question

I have an issue using the JQuery-File-Upload plugin. I am using the plugin directly and not through the author's provided html example pages. Basically I have a form with some inputs one of which is a file input. The first upload works fine but when I attempt a second upload both files are sent (the first one for the second time) when it should only be the second one.

Example:

• File 1 is selected.
• File 1 is uploaded.
• Success.
• Using jquery I reset the form with $(FORM_SELECTOR).trigger('reset')
• File 2 is selected.
• File 1 and file 2 are BOTH uploaded.
• Problem.

Now I have two copies of file 1. This is not what I want.

Obviously there isn't much point of using an ajax form upload if it only works once so I assume that there is something I am missing.

Is there a way to reset the file queue?

When examining the data.files object I can see that the files are there after the form is reset. What can I do to sync the plugin with the input or clear out the data.files. If I manually clear out the data.files array (via pop or data.files = []) attempting a second upload does not work.

I init the upload form like this:

    $('#file-upload-form').fileupload({
    url: 'uploads/upload',
    type: 'POST',
    dataType: 'json',
    multipart: true,
    dropZone: null,
    formAcceptCharset: 'utf-8',
    autoUpload: true,
    add: function (e, data) {
        fileUploadData = data;
        $("#upload-file-btn").click(function () {
            data.submit()
                .success(function (e, status, data) {
                    console.log("success response from post", status, data);
                    var i = '<input id="file-select-input" name="files[]" multiple/>';
                    $('#file-select-input').replaceWith(i);
                })
        });
    }
});

Solution 1

I have a custom .add event handler, in which I have called .off("click") on my button:

                add: function (e, data) {

                    $('#btnstartupload').off("click");
                    data.context = $('#btnstartupload')
                        .click(function () {
                            data.submit();
                            $(".fileinput-button").hide();
                        });
}

Solution 2

I had the same problem and the only way I've managed to solve that was to check in the submit callback if the file was already uploaded. I just check if the file name is included in the array fileNames which I push the current file name before the submission and checks on the next time if the next one is present on the array and if so cancel the submission.

var fileNames = new Array();

$('#uploadfile').fileupload({
  submit: function(e, data) ->
    var fileName = data.files[0].name;
    if ($.inArray(fileName, fileNames) === -1)
      fileNames.push(fileName);
    else
      return false;
});