I am experimenting with loading ajax file after this article , and so far the process is working fine, but I was not able to find a way that I could implement the cancel button for the list of files.
The main code in the article is as follows:
var fileInput = document.getElementById('the-file'); var file = fileInput.files[0]; var xhr = new XMLHttpRequest(); xhr.upload.addEventListener('progress', onprogressHandler, false); xhr.open('POST', '/upload/uri', true); xhr.send(file); function onprogressHandler(evt) { var percent = event.loaded/event.total*100; console.log('Upload progress: ' + percent + '%'); }
The article mentions that you can define an abort listener:
xhr.upload.onabort = function (evt) { console.log("Aborted", evt); }
According to the MDC, there is an abort method in the FileReader object , but I don’t understand how I should use it in this case (or if this is the same “interrupt” that I am looking for at all).
What I would like to have is an interrupt button next to each file selected for download, and if the user clicks the button, this file must be removed from the list or if its download was launched, it should be immediately interrupted.
source share