Abort a multiple file upload AJAX request

Question

I am trying to abort a multiple file upload with a progress bar, showing the state of the process.

What I want to achieve is to completely abort the multiple file upload on the abort button click; to stop the progress bar as well as to clear every file(s) that might have been uploaded during the course of the initially triggered multiple file upload process.

Below is my code:

var AJAX = $.ajax({ 
    xhr: function() {
        var XHR = new window.XMLHttpRequest();

        XHR.upload.addEventListener('progress', function(e) {
          if (e.lengthComputable) {

            var PROGRESS = Math.round((e.loaded/e.total)*100);
            $('#PROGRESS_BAR').text(PROGRESS);

        } }, false); return XHR; },
    url        : '/php.php',
    type       : 'POST',
    data       : DATA,
    cache      : false,
    processData: false,
    contentType: false,
    beforeSend : function() { }, 
    success    : function() { } 
});

$(document).on('click', '.ABORT', function(e) {     
    AJAX.abort();
});

I use the code above to dynamically upload images with a progress bar.

I found lots of articles using .abort() to stop the process, but that seemed to only work browser side and not server side.

In what way can I cease the upload completely as in: on both client and server side as .abort() does not enable me get the desirable result?

Answer 1

Try this:

var XHR = new window.XMLHttpRequest();
var AJAX = $.ajax({ 
    xhr: function() {
        XHR.upload.addEventListener('progress', function(e) {
          if (e.lengthComputable) {

            var PROGRESS = Math.round((e.loaded/e.total)*100);
            $('#PROGRESS_BAR').text(PROGRESS);

        } }, false); return XHR; },
    url        : '/php.php',
    type       : 'POST',
    data       : DATA,
    cache      : false,
    processData: false,
    contentType: false,
    beforeSend : function() { }, 
    success    : function() { } 
});

$(document).on('click', '.ABORT', function(e){      
    XHR.abort();
});