How to abort an in-progress upload?

Itay Taragano

March 27, 2017 13:57 Updated

You can cancel an in-progress upload by aborting the XHR (ajax request) call.
You can bind to the fileuploadadd event of the file input field, submit the request while keeping the jqXHR object and use it for aborting: jqXHR.abort();.

For example:

$(".cloudinary-fileupload").bind('fileuploadadd', function(e, data) {
    jqXHR = data.submit(); // Catching the upload process of every file
});

$('#cancel_button').click(function (e) {
    if (jqXHR) {
        jqXHR.abort();  
        jqXHR = null;
        console.log("Canceled");
    }
    return false;
});

Comments

2 comments

Lucas Nelson

April 04, 2015 23:35
The link to the github issue (https://github.com/blueimp/jQuery-File-Upload/issues/290) is returning a 404.
0
Lucas Nelson

April 06, 2015 01:39
I struggled to get this to work when there are fileupload validations in the mix (eg. maxFileSize). The selection of an invalid file was triggering an upload. This does no happen when using the default 'add' handler.

I suggest two improvements:
1. Disable the default autoUpload behaviour:
  $('.cloudinary-fileupload').cloudinary_fileupload({
  autoUpload: false
  // plus any other options, eg. maxFileSize
  });
2. Use the 'fileuploadprocessalways' event to do the submit:
  $(".cloudinary-fileupload").bind('fileuploadadd', function(e, data) {
  if (data.files.error && data.files[data.index].error) {
  // do something to show the user the validation error
  } else {
  jqXHR = data.submit(); // Catching the upload process of every file
  
  // and change the UI to let the user know an upload is in progress
  }
  });
0

Please sign in to leave a comment.

Related articles