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?

Community · Accepted Answer · 2017-05-23 12:14:30Z

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, 2017 at 12:14

CommunityBot

11 silver badge

answered Jan 26, 2014 at 12:13

Fractaliste

5,99511 gold badges47 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Manish Kumar Over a year ago

I am using something like ` node.find("h6").on("click",function(){ for(var i=0;i<data.files.length;i++){ if(data.files[i].name==$(this).attr("fileName")){ data.files.splice(i,1); node.remove(); } } }); ` and its working correct. Is it good?

Fractaliste Over a year ago

@Manish It assumes that all your file have different name.

Manish Kumar Over a year ago

No it may be same file name

Fractaliste Over a year ago

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.

Collectives™ on Stack Overflow

Blueimp File Upload: file is not deleting correctly from queue

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related