jqXHR.abort is not a function

Question

I am trying to do cancel button for jquery file upload (http://blueimp.github.io/jQuery-File-Upload/).

My code:

var jqXHR = $('#fileupload').fileupload({
url: 'server/index.php',
dataType: 'json',
dropZone: $('#dropzone'),
})

$('button.cancel').click(function (e) {
    jqXHR.abort();
    alert("cancel");
});

When I click on cancel button, the cancel button does not work and I am getting " jqXHR.abort is not a function" error.

What do I need to do to get cancel button to cancel file uploading working?

Answer 1

As per the documentation, it should be done like this.

var jqXHR = null;
$('#fileupload').fileupload({
    url: 'server/index.php',
    dataType: 'json',
    dropZone: $('#dropzone'),
    add: function (e, data) {
        jqXHR = data.submit();
    }
});

Now you can access the jqXHR object like this

$('button.cancel').click(function (e) {
    jqXHR.abort();
});

---

For multiple aborts, the method will be this

$('#fileupload').fileupload({
    add: function(e, data) {
         $('.progress_bar_wrapper').append($('.progress_context:first').clone());
        data.context = $('.progress_context:last');
        data.content.find('.abort').click(abortUpload );
        var xhr = data.submit();
        data.context.data('data',{jqXHR: xhr}); // so much data...
    }
)};

function abortUpload (e) {
     e.preventDefault();
     var template = $(e.currentTarget).closest('.template-upload'),
     data = template.data('data') || {}; // data, data , data (queue Monty Python skit)
      if (!data.jqXHR) {
        data.errorThrown = 'abort';
        this._trigger('fail', e, data);
      } else {
        data.jqXHR.abort();
      }
}

Reference: https://github.com/blueimp/jQuery-File-Upload/issues/290