Blueimp File Upload: file is not deleting correctly from queue

Question

I am having following blueimp file upload code:

.on('fileuploadadd', function (e, data) {
   data.context = $('<div/>').appendTo('#FilesListThumb');
   $.each(data.files, function (index, file) {
         var node = $("<div><h6 fileId="+index+">X</h6></div>").addClass("thumbnail-ib");
         node.appendTo(data.context);
         node.find("h6").click(function(){
              data.files.splice($(this).attr("fileId"),1);
              node.remove();
         });
 });

When i click h6 sometimes it removes files from queue sometimes not.Why? Next question is how to remove all files from queue?

score 3 · Answer 1 · edited May 23 '17 at 12:14

3

I suggest you to use an incremented global variable instead of the index value:

var globalVariable = 0; // To be declare in a global context

.on('fileuploadadd', function (e, data) {
    data.context = $('<div/>').appendTo('#FilesListThumb');
    $.each(data.files, function (index, file) {
        globalVariable = globalVariable + 1;
        var node = $("<div><h6 fileId=" + globalVariable + ">X</h6></div>").addClass("thumbnail-ib");
        file.fileId = globalVariable; // Add the same id to the file
        node.appendTo(data.context);
        node.find("h6").click(function(){
            $.each(data.files, function (index, file) {
                if(file.fileId == $(this).attr("fileId"){
                     data.files.splice(index, 1);
                     return false; // Break the loop
            };
            node.remove();
        });
    });
});

To remove files from the queue you can look at the following question on SO (I like the tanguy_k's answer) : How do I empty an array in JavaScript? and apply it to the data.files array.

edited May 23 '17 at 12:14

Community

1
1

answered Jan 26 '14 at 12:13

Fractaliste

5,777
11
42
86

I am using something like ` node.find("h6").on("click",function(){ for(var i=0;i – Manish Kumar Jan 26 '14 at 13:47
@Manish It assumes that all your file have different name. – Fractaliste Jan 26 '14 at 13:56
No it may be same file name – Manish Kumar Jan 26 '14 at 14:00
1

So you should use an other id without collision, like an autoincremented-id, or an hashed combined value (name + timestamp). My example above is with an auto-incremented value. – Fractaliste Jan 26 '14 at 14:05

Blueimp File Upload: file is not deleting correctly from queue

1 Answers1