How to listen for upload progress when using AJAX - XMLHttpRequest(XHR)?
Learn how to listen for upload progress when you use AJAX - XMLHttpRequest(XHR).
Introduction
XHR is a Web API that is built in with most if not all browsers that that enables website interaction with servers. If you have heard of AJAX but not XHR, AJAX(Asynchronous JavaScript and XML) is an acronym that describes (asynchronous) interaction between websites and servers which uses APIs such as XHR.
When you upload files to your server, it is a good idea to show upload progress to your website users. This is especially true for larger files that can’t finish uploading instantly.
XHR - JavaScript
You can use browsers’ XHR upload object to listen for upload progress using onprogress
and onload
methods.
let xhr = new XMLHttpRequest();
xhr.upload.onloadstart = function() {
console.log('Upload has started.');
};
xhr.upload.onprogress = function(event) {
let uploadedBytes = event.loaded / event.total;
console.log(`Uploaded ${uploadedBytes} bytes`);
};
xhr.upload.onload = function() {
console.log('Upload completed successfully.');
};
xhr.upload.onerror = function() {
console.log(`Error during the upload: ${xhr.status}.`);
};
Example
This is a simple example using input element for file input and XHR to tranfer the file to your server.
<input type="file" onchange="upload(this.files[0])">
<script>
function upload(file) {
let xhr = new XMLHttpRequest();
// listen for upload progress
xhr.upload.onprogress = function(event) {
let percent = Math.round(100 * event.loaded / event.total);
console.log(`File is ${percent} uploaded.`);
};
// handle error
xhr.upload.onerror = function() {
console.log(`Error during the upload: ${xhr.status}.`);
};
// upload completed successfully
xhr.onload = function() {
console.log('Upload completed successfully.');
};
xhr.open('POST', 'https://domain.com/upload');
xhr.send(file);
}
</script>
You can refer to MDN Upload API document for the complete API.
With this, you could show upload progress during file(s) upload on your website.
Support Jun
Thank you for reading! Support Jun
If you are preparing for Software Engineer interviews, I suggest Elements of Programming Interviews in Java for algorithm practice. Good luck!
You can also support me by following me on Medium or Twitter.
Feel free to contact me if you have any questions.
Comments