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 upload. I cannot figure out how to access the files array appropriately. Every time in the add callback, the index is 0 and the files array length is 1 (it only contains the file the user clicked to remove). I'm adding a link for each file queued to a div, which is clickable and should remove the file if clicked.

My thought was to just create a remove link with the index of the file and remove it from the array, but because of the problem stated above, the index is never correct. I've also tried by filename, but the filename in the "on" callback is always the first file which was selected for upload - some closure scoping I have to figure out.

How do I programmatically remove files from the upload queue?

HTML:

<div id="fileBrowserWrapper">
    <form id="myForm" action="#" method="post" enctype="multipart/form-data">
        <input id="uploadDocBrowse" type="file" name="files[]" multiple/>                                                    
    </form>
</div>
<div id="inputFilesBox"></div>
<div id="uploadFilesBox"></div>

And the file upload JavaScript:

$('#myForm').fileupload({
    url: "/SomeHandler",
    dataType: 'html',
    autoUpload: false,
    singleFileUploads: false,
    replaceFileInput: false,
    add: function (e, data) {
        console.log("Number of files: " + data.files.length);

        $.each(data.files, function (index, file) {                                       
            $('#uploadFilesBox').append("<div class='uploadBox' id='fileDiv_" + file.name + "'><div class='leftEle'><a href='#' id='link_" + index + "' class='removeFile'>Remove</a></div><div class='midEle'>" + file.name + "</div></div>")
            .on('click', { filename: file.name, files: data.files }, function(event) {                            
                var uploadFilesBox = $("#uploadFilesBox");
                var remDiv = $("#fileDiv_" + event.data.filename);
                remDiv.remove();
                event.data.files.splice(0, 1);                              
            }
        });
    });

    data.context = $('#myButton')
    .click(function () {
        data.submit();
    });              
});

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 = $("<div class='uploadBox' id='fileDiv_" + file.name + "'><div class='leftEle'><a href='#' id='link_" + index + "' class='removeFile'>Remove</a></div><div class='midEle'>" + file.name + "</div></div>");
                    $('#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();
                        }                                                    
                    });
            }
});