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
The link to the github issue (https://github.com/blueimp/jQuery-File-Upload/issues/290) is returning a 404.
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:
Disable the default autoUpload behaviour:
$('.cloudinary-fileupload').cloudinary_fileupload({
autoUpload: false
// plus any other options, eg. maxFileSize
});
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
}
});
Please sign in to leave a comment.