Como cancelar um XMLHttpRequest usando um botão?

Question

Estou criando um script para upload de arquivos que será divido em chunks de acordo com o tamanho do arquivo, criando assim diversas requisições com partes diferentes do arquivo, porém eu gostaria de colocar a opção em que o usuário possa cancelar um upload.

Essa é a função que faz o upload do arquivo:

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);
}

Sei que é possível fazer um abort() no objeto para cancelar a requisição, porém como eu poder fazer para cancelar só quando o usuário clicar em um botão? Devo salvar o objeto XMLHttpRequest() em alguma parte para chamar depois ou existe algum tipo de identificador que eu posso usar para cancelar a requisição?

Por exemplo, eu poderia definir uma variável global e salvar o objeto da requisição nela, porém se eu tiver mais de um arquivo sendo upado, como faço para manter o controle de qual requisição deve ser cancelada? Uma vez que a cada novo upload a variável vai ser atualizada com um novo objeto.

Answer 1

Usa o método abort: https://developer.mozilla.org/pt-BR/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: editado após a edição da pergunta explicando o cenário para abortar uma requisição em específico.

Basta executar abortar() no click do botão.
Antes de executar o abort verificar o status da requisição em xhr.status : https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/status