How to cancel an Xmlhttprequest using a button?

Question

I am creating a file upload script that will be divided into Chunks according to the file size, thus creating several requests with different parts of the file, but I would like to put the option where the user can cancel an upload.

This is the function that uploads the file:

function uploadFile(e, uploadID){
    var chunks = e.chunks;
    var location = e.location;
    var cnt = 0;
    var end = chunks.length;

    var temp = 
              function callback(cnt){
                    var e = chunks[cnt];
                    var xhr = new XMLHttpRequest();
                    xhr.open("PUT", location, true);
                    xhr.setRequestHeader('Content-Range', e.range);
                    xhr.send(e.data);
                    xhr.onloadend = 
                                function() {
                                            var status = xhr.status;

                                            cnt += 1;

                                            if (status == 308) {
                                                callback(cnt);
                                            } else if (status == 200) {
                                                console.log("Upload feito");
                                            } else {
                                                console.log("Erro: " + xhr.response);
                                            }
                                        };
    }(cnt);
}

I know it is possible to abort() the object to cancel the request, but how can I cancel it only when the user clicks a button? Should I save the Xmlhttprequest() object somewhere to call later or is there some type of identifier I can use to cancel the request?

For example, I could set a global variable and save the request object to it, but if I have more than one file being uploaded, how do I keep track of which request to cancel? Since every new upload the variable will be updated with a new object.

Answer 1

Use the method abort: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/abort

// a variável deve ser global ou ser passada por parâmetro para a function que irá abortar
var xhrList = [];
function uploadFile(e, uploadID){ 
    // aqui deve haver um id que identifique o arquivo (chamei abaixo de "x")
    var xhr = new XMLHttpRequest();
    xhrList.push({ id: x, obj: xhr});
}

function abortar(id) {
  var xhr = xhrList.find(x => x.id === id).obj;
  xhr.abort();
}

EDIT: edited after editing the question explaining the scenario for aborting a specific request.

Just run abortar() at the click of the button.
Before executing the abort check the status of the request in xhr.status : https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/status