XHR abort doesn't stop file uploading

Question

I've made an XHR-based file uploader with progressbar, and I would like to add a feature to cancel the upload before it fully uploaded. The simlified code (runs after DOM ready):

var xhr;

$('#upload').click(function(){
    var file = $('#file').get(0).files[0];
    xhr = new XMLHttpRequest();
    xhr.upload.onprogress = function(event){
        if (event.lengthComputable){
            var percent = event.loaded / event.total;
            $('#uploadpercent').html(Math.round(percent * 100) + "%");
        }
    };
    xhr.abort = function(){
        console.log('aborted');
    };
    xhr.onload = function(){
        $('#uploadpercent').html("100%");
        // ...
    };
    xhr.open("POST", "upload.php?filename=" + file.name);
    xhr.send(file);
});

$('#cancel').click(function(){
    xhr.abort();
});

After the xhr.abort() called, the abort event handler prints the 'aborted' to the console, but it doesn't do anything else. The progress bar doesn't stop, and after it finished, the entire file is uploaded. Tested on the latest Firefox and Chrome.

I can't figure out what is wrong with my code.

Edit:

I've tried the same with jQuery, the code: (mostly from How can I upload files asynchronously?)

var jqXHR;

$('#upload').click(function(){
    var file = $('#file').get(0).files[0];
    jqXHR = $.ajax({
        type : "POST",
        url : "upload.php?filename=" + file.name,
        data : file,
        xhr: function(){
            var myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload){
                myXhr.upload.addEventListener('progress', function(event){
                    if (event.lengthComputable){
                        var percent = event.loaded / event.total;
                        $('#uploadpercent').html(Math.round(percent * 100) + "%");
                    }
                }, false);
            }
            return myXhr;
        },
        success : function(response){
            $('#uploadpercent').html("100%");
            if (response.length > 0){
                console.log(response);
            }
        },
        error : function(_jqXHR, textStatus){
            if (textStatus === "abort"){
                console.log('aborted');
            }
        },
        cache : false,
        contentType : false,
        processData : false
    });
});

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

To my surprise, this is working as expected. When the jqXHR.abort() called, the 'aborted' text also printed, the process stopped, and only part of the file have been uploaded. The problem is I want to make my code independent of jquery in the future, and I don't understand yet why my code isn't working the same way.

Answer 1

Ok, I noticed that the event name is onabort. With the xhr.abort = ... line I overwrote the abort function. So the solution:

xhr.onabort = function(){...};

or

xhr.addEventListener("abort", function(){...});