Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Delete files programmatically with jquery fileupload basic

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();
    });              
});
like image 741
Furynation Avatar asked Dec 26 '12 17:12

Furynation


3 Answers

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();
                        }                                                    
                    });
            }
});
like image 101
Furynation Avatar answered Nov 16 '22 01:11

Furynation


Thanks for that @Furynation.

What I did was similar to your approach. For every file I select I add a row to a table(pre upload submission). This row I assign to the data.context to use for later use.

See: https://github.com/blueimp/jQuery-File-Upload/issues/3083

My code snippet is in the add callback handler:

 $("#upload").click(function () {
                 if (data.files.length > 0) { 
                     data.submit();
                 }
            });
            data.context.find('a').on('click',function (event) {  
                event.preventDefault();
                data.context.remove();   
                data.files.length = 0;   
            });

This removes the table row and resets the array.

If there is a cleaner way, please let me know.

like image 44
shane lee Avatar answered Nov 16 '22 03:11

shane lee


Works for me for multiple files - it checks all files and doesn't break when file with error is one in the middle of all files (like .splice() or .lenght=0 do). Idea is: do validation -> if error: mark index of file with error -> after all files/before upload: remove/delete wrong indexes/files by $.grep() -> upload good files together singleFileUploads: false.

$(this).fileupload({
        // ...
        singleFileUploads: false,   // << send all together, not single
        // ...
        add: function (e, data) {

            // array with all indexes of files with errors
            var error_uploads_indexes = [];

            // when add file - each file
            $.each(data.files, function(index, file) {

                // array for all errors - in example is only one: size
                var uploadErrors = [];

                // ... validation

                        // check size
                        if(data.files[index]['size'] > 1048576) {
                            uploadErrors.push('Filesize is too big');
                        };
                // ...

                // when errors
                if(uploadErrors.length > 0) {

                    // mark index of error file
                    error_uploads_indexes.push(index);
                    // alert error
                    alert(uploadErrors.join("\n"));

                };

            }); // << each


            // remove indexes (files) with error
            data.files = $.grep( data.files, function( n, i ) {
                return $.inArray(i, error_uploads_indexes) ==-1;
            });


            // if are files to upload
            if(data.files.length){
                // upload by ajax
                var jqXHR = data.submit().done(function (result, textStatus, jqXHR) {
                        //...
                     alert('done!') ;
                        // ...
                });
            } // 

        },
        // ...
    }); // << file_upload
like image 38
Laguna Web Design Avatar answered Nov 16 '22 01:11

Laguna Web Design