How to abort an in-progress upload?

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

The following page includes some more code samples
https://github.com/blueimp/jQuery-File-Upload/issues/290

Have more questions? Submit a request

Comments

  • Avatar
    Lucas Nelson

    The link to the github issue (https://github.com/blueimp/jQuery-File-Upload/issues/290) is returning a 404.

  • Avatar
    Lucas Nelson

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

Powered by Zendesk