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?
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
As the document API states, you should use the send
method to get back the jqXHR
. This would work for you
var jqXHR = $('#fileupload').fileupload('send', {
url: 'server/index.php',
dataType: 'json',
dropZone: $('#dropzone'),
});
$('button.cancel').click(function (e) {
jqXHR.abort();
alert("cancel");
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With