Here my code:
let xhr;
function uploadFile() {
const bar = $("#progressUpload");
const dialog = $("#modalUpload");
const alertOk = $("#alertUploadOk");
const btnClose = $("#btnClose");
const btnAbort = $("#btnAbort");
dialog.modal("show");
btnClose.prop("disabled", true);
btnAbort.prop("disabled", false);
xhr = $("#formUploadConfig").ajaxForm({ // <--- does not store the Ajax call
beforeSubmit: function() {
let percentVal = '0%';
bar.width(percentVal)
bar.html(percentVal).attr('aria-valuenow', percentVal);
},
uploadProgress: function(event, position, total, percentComplete) {
let percentVal = percentComplete + '%';
bar.width(percentVal)
bar.html(percentVal).attr('aria-valuenow', percentVal);
},
success: function(response) {
let percentVal = '100%';
bar.width(percentVal)
bar.html(percentVal).attr('aria-valuenow', percentVal);
alertOk.show();
},
complete: function(xhr) {
if (xhr.responseText) {
btnClose.prop("disabled", false);
btnAbort.prop("disabled", true);
}
},
abort: function () {
alert("aborted");
}
});
}
My goal is to store the Ajax call in order to call xhr.abort(); as needed. If I was using the standard ajax function I was simple:
var xhr = $.ajax({ ...
but now I'm trying to use the JQuery AjaxForm plugin and I don't understand how to retrieve this variable.