XMLHttpRequest (XHR) allows us to listen for various events that can occur while the HTTP request is being processed. This includes error notifications, periodic progress notifications, request abort notifications, and more.

In this article, you'll learn how to monitor the file download as well as upload progress using XHR events in JavaScript.

Monitor Download Progress

One such event is progress that is triggered when the downloading starts. For example, when you post something, XMLHttpRequest will first upload our data (the request body) to the server, and then downloads the response.

You can use this event along with load to track the file download status. Here is an example:

const xhr = new XMLHttpRequest();

// listen for `load` event
xhr.onload = () => {
    console.log(`The transfer is completed: ${xhr.status} ${xhr.response}`);
};

// listen for `error` event
xhr.onerror = () => {
    console.error('Download failed.');
}

// listen for `abort` event
xhr.onabort = () => {
    console.error('Download cancelled.');
}

// listen for `progress` event
xhr.onprogress = (event) => {
    // event.loaded returns how many bytes are downloaded
    // event.total returns the total number of bytes
    // event.total is only available if server sends `Content-Length` header
    console.log(`Downloaded ${event.loaded} of ${event.total} bytes`);
}

// open and send request
xhr.open('GET', '/download-attachment');
xhr.send();

As you can see above, we have added several event listeners for events that can be triggered while downloading data from the server using XMLHttpRequest.

The progress event handler, specified by the xhr.onprogress function above gets the total number of bytes to transfer as well as the number of bytes transferred so far in the event's total and loaded properties.

Monitor Upload Progress

XMLHttpRequest provides progress events for both download and upload transfers. The download events are fired directly on the XMLHttpRequest object, as we have seen in the above example.

For upload transfers, the events are fired on the XMLHttpRequest.upload object; an object without methods, exclusively exists to track upload events.

The upload object provides its own events similar to XMLHttpRequest that can be used to monitor the upload. Here is an example:

const xhr = new XMLHttpRequest();

// listen for `upload.load` event
xhr.upload.onload = () => {
    console.log(`The upload is completed: ${xhr.status} ${xhr.response}`);
};

// listen for `upload.error` event
xhr.upload.onerror = () => {
    console.error('Upload failed.');
}

// listen for `upload.abort` event
xhr.upload.onabort = () => {
    console.error('Upload cancelled.');
}

// listen for `progress` event
xhr.upload.onprogress = (event) => {
    // event.loaded returns how many bytes are downloaded
    // event.total returns the total number of bytes
    // event.total is only available if server sends `Content-Length` header
    console.log(`Uploaded ${event.loaded} of ${event.total} bytes`);
}

// open request
xhr.open('POST', '/upload-file');

// prepare a file object
const files = document.querySelector('[name=file]').files;
const formData = new FormData();
formData.append('avatar', files[0]);

// send request
xhr.send(formData);

Take a look at how to upload files using XHR tutorial to see a practical example of uploading files in JavaScript.

✌️ Like this article? Follow me on Twitter and LinkedIn. You can also Subscribe to RSS Feed.

Last Updated: