Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

like image 696
Rahul Gupta Avatar asked Dec 17 '13 08:12

Rahul Gupta


1 Answers

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
    }
});
like image 185
Rahul Gupta Avatar answered Oct 19 '22 20:10

Rahul Gupta