xhrupload

XHRUpload is the interface used in the XMLHttpRequest API to manage the upload portion of a request. It is exposed via the xhr.upload property and is commonly used to monitor and control file uploads initiated with XMLHttpRequest.

The XHRUpload interface was introduced with HTML5 to enable progress and state events for the request payload, complementing the existing download-related events of XMLHttpRequest. It provides a dedicated event source for upload activity separate from the main XMLHttpRequest object.

The XHRUpload object emits events such as progress, loadstart, load, loadend, error, and abort. The progress event provides details through properties like loaded and total when lengthComputable is true, allowing client code to display progress bars or indicators. Developers can attach listeners using addEventListener or by assigning handlers to onprogress, onloadstart, and related properties.

Usage typically involves attaching a listener to xhr.upload and then sending the request with the payload, often a FormData object. Example:

var xhr = new XMLHttpRequest();

xhr.open('POST','upload.php');

xhr.upload.addEventListener('progress', function (e) {

if (e.lengthComputable) {

console.log('Uploaded ' + e.loaded + ' of ' + e.total);

}

}, false);

xhr.send(formData);

Compatibility and limitations: XHRUpload is supported in most modern browsers, but behavior can vary across environments. Progress events may be throttled or unavailable in certain circumstances, and total sizes may be unknown for some requests, especially when streaming or compressing data. Developers should rely on lengthComputable and provide fallbacks as needed.

See also: XMLHttpRequest, FormData, File API.