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

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

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

Answer 3

You can reset inputs quite easy. If that does not work for you, you might store the file somwhere.

DEMO

$("button#1").click(function(){
  //check file
    alert($("input").val());
      return false;
});
$("button#2").click(function(){
  //reset form
    $("form")[0].reset();
      return false;
}); 
$("button#3").click(function(){
  //replace input
    $("input").replaceWith($('<input type="file"/>'));
    return false;
}); 

Answer 4

I ran into the same problem. It's puzzling why the library re-sends previously uploaded files. I tried to destroy it, re-initialize it and clear/reset the actual file input field, but none of them worked.

The solution I came up with is to keep track of all upload attempts by storing file names in an array and checking in the "send" callback if a file has been already uploaded.

Callback:

send: function (e, data) {
            var file = data.files[0];

            // if we already attempted to upload a file with the same file name
            // do not send it in order to avoid duplicates
            if (existsInAttemptedUploads(file.name)) {
                return false;
            }
        },

Helper methods:

// list of file names that a user attempted to upload
var attemptedUploads = [];

// adds a file name to the list of attempted uploads
function addAttemptedUpload(fileName) {
    attemptedUploads.push(fileName);
};

// removes a given file name from the list of attempted uploads
function removeAttemptedUpload(fileName) {
    var index = $.inArray(fileName, attemptedUploads);

    if (index > -1) {
        attemptedUploads.splice(index, 1);
    }
};

// checks if a given file name is in the list of attempted uploads
function existsInAttemptedUploads(fileName) {
    var result = $.inArray(fileName, attemptedUploads);

    if (result == -1) {
        return false;
    }

    return true
};

Make sure to update the list of attemptedUploads in your "done" and "fail" callbacks and remove a file from the list if it was removed. For example:

done: function (e, data) {
            var id = e.target.id;

            // List all uploaded files
            $.each(data.result.files[0], function (index, file) {
                // add the current file name to the list of attempted file names
                addAttemptedUpload(file.origFileName);

                $('#uploadedFiles').append('<li id="' + file.id + '" data-orig-filename="' + file.origFileName + '">' + file.fileName + ' <a class="removeFile" href="<?php echo $deleteUrl; ?>/' + file.id + '">' + ' Remove</a></li>');
            });
        },

Answer 5

My code like that, when clicking the Remove link into the multiple file from JSP page, It's OK for IE11, Chrome and Firefox.

function removeFileLink(id) {
   var fileName = document.getElementById("import_file_" + id).value.replace(/^.*[\\\/]/, '');
   var objFiles = document.getElementsByName("import_fileList");
   for(var i=0; i<objFiles.length; i++){
       if(objFiles[i].value.replace(/^.*[\\\/]/, '') == fileName) {
           $(objFiles[i]).remove();                        
       }
   }
   document.getElementById("import_form").enctype="multipart/form-data";
   document.getElementById("import_form").submit();           
   return false;          
}