Delete files programmatically with jquery fileupload basic

Question

I\'m using the blueimp file upload plugin (the basic version) to implement multifile upload. I am trying to implement functionality to allow the user to remove queued files for

Answer 1

I solved this. Here is the solution with description:

I found my solution after tinkering with it some more. The key was remembering that I was in a call back. So in the event handler for the remove functionality, I just zeroed out the data.files array, and in the submit for that handler, I only submit if the files array has a length greater than 0. I cleaned up the event handler function so it's easier on the eyes. HTML is unchanged.

New JavaScript handling code:

 $('#myForm').fileupload({
            url: "/SomeUrl",
            dataType: 'html',            
            add: function (e, data) {
                $.each(data.files, function (index, file) {
                    var newFileDiv = $("
Remove
" + file.name + "
");
                    $('#uploadFilesBox').append(newFileDiv);

                    newFileDiv.find('a').on('click', { filename: file.name, files: data.files }, function (event) {                        
                        event.preventDefault();
                        var uploadFilesBox = $("#uploadFilesBox");
                        var remDiv = $(document.getElementById("fileDiv_" + event.data.filename));
                        remDiv.remove();                        
                        data.files.length = 0;    //zero out the files array                                     
                    });

                    data.context = newFileDiv;
                });

                $('#myButton')
                    .click(function () {
                        if (data.files.length > 0) {     //only submit if we have something to upload
                            data.submit();
                        }                                                    
                    });
            }
});