Add cancel upload or abort functionality to bootstrap multiple file upload plugin

Rahul Gupta picture Rahul Gupta · Dec 17, 2013 · Viewed 10.1k times · Source

I am using bootstrap multiple file upload plugin to upload file. I am using the example that is on this link. Now I want to add another button "Cancel upload" besides the "Add files" button. On clicking the "Cancel upload" button the uploading process should be stopped. Please help me out to get around this issue. Thanks

Answer

Rahul Gupta picture Rahul Gupta · Dec 19, 2013

Finally, after extensive trials and errors and searching for relevant code solutions, I got it working exactly the way I wanted ! I posted my query on the plugin's github issue page and got the help from there.

Below is the code sample that really worked :

1.First you have to bind the fileuploadadd event:

$('#fileupload').bind('fileuploadadd', function(e, data){
      var jqXHR = data.submit(); // Catching the upload process of every file
      $('#cancel_all').on('click',function(e){
            jqXHR.abort();
      });
});

2.Then you have to bind the cancel event that will be called when clicking the "Cancel Upload" button, which will cancel all the file currently being uploaded :

$('#fileupload').bind('fileuploadfail', function(e, data){
    if (data.errorThrown === 'abort')
    {
        //PUT HERE SOME FEEDBACK FOR THE USER
    }
});