Cannot Remove Files From File List Using Jquery-file-upload

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 inpu

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 = newArray();

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

Solution 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 filealert($("input").val());
      returnfalse;
});
$("button#2").click(function(){
  //reset form
    $("form")[0].reset();
      returnfalse;
}); 
$("button#3").click(function(){
  //replace input
    $("input").replaceWith($('<input type="file"/>'));
    returnfalse;
}); 

Solution 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 duplicatesif (existsInAttemptedUploads(file.name)) {
                returnfalse;
            }
        },

Helper methods:

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

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

// removes a given file name from the list of attempted uploadsfunctionremoveAttemptedUpload(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 uploadsfunctionexistsInAttemptedUploads(fileName) {
    var result = $.inArray(fileName, attemptedUploads);

    if (result == -1) {
        returnfalse;
    }

    returntrue
};

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('<liid="' + file.id + '"data-orig-filename="' + file.origFileName + '">' + file.fileName + ' <aclass="removeFile"href="<?phpecho$deleteUrl; ?>/' + file.id + '">' + ' Remove</a></li>');
            });
        },

Solution 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.

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