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

Question

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 1

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
    }
});

Answer 2

I think you can find your answer in the document of the plugin from here , I post the code here:

var jqXHR = $('#fileupload').fileupload('send', {files: filesList})
    .error(function (jqXHR, textStatus, errorThrown) {
        if (errorThrown === 'abort') {
            alert('File Upload has been canceled');
        }
    });
$('button.cancel').click(function (e) {
    jqXHR.abort();
});

The code above means uploading files programmatically(mannually). In such a case, for the fileupload function, the second argument must be an object with an array (or array-like list) of File or Blob objects as files property. So you need to get the files array before you execute above code:

var filesList = $("#fileupload").get().files;

I'm not sure whether you need to convert FileList to array like below, but you can try:

var i,files = $("#fileupload").get().files,filesList=[];
for(i=0;i<files.length;i++){
    filesList.push(files.item(i))
}

But be aware that there are limitations here: File is just supported with IE10+ and other modern browsers.

For more information, I list some articles here:

1. jQuery-File-Upload Programmatic file upload
2. Using files from web application
3. FileList API