XMLHttpRequestUpload

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2015⁩.

Note: This feature is available inWeb Workers, except forService Workers.

TheXMLHttpRequestUpload interface represents the upload process for a specificXMLHttpRequest. It is anopaque object that represents the underlying, browser-dependent, upload process. It is anXMLHttpRequestEventTarget and can be obtained by callingXMLHttpRequest.upload.

Instance properties

This interface has no specific property, but inherits the properties ofXMLHttpRequestEventTarget and ofEventTarget.

Instance methods

This interface has no specific method, but inherits the methods ofXMLHttpRequestEventTarget and ofEventTarget.

Events

This interface has no specific event, but inherits the events ofXMLHttpRequestEventTarget.

Examples

Uploading a file with a timeout

This allows you to upload a file to a server; it displays a progress bar while the upload is happening as well as a message with the progress and the results, success or failure. An abort button allows to stop an upload.

HTML

html

<!doctype html><html lang="en">  <head>    <meta charset="utf-8" />    <meta name="viewport" content="width=device-width" />    <title>XMLHttpRequestUpload test</title>    <link rel="stylesheet" href="xhrupload_test.css" />    <script src="xhrupload_test.js"></script>  </head>  <body>    <main>      <h1>Upload a file</h1>      <p>        <label for="file">File to upload</label><input type="file" />      </p>      <p>        <progress></progress>      </p>      <p>        <output></output>      </p>      <p>        <button disabled>Abort</button>      </p>    </main>  </body></html>

CSS

css

body {  background-color: lightblue;}main {  margin: 50px auto;  text-align: center;}#file {  display: none;}label[for="file"] {  background-color: lightgrey;  padding: 10px;}progress {  display: none;}progress.visible {  display: inline;}

JavaScript

const fileInput = document.getElementById("file");const progressBar = document.querySelector("progress");const log = document.querySelector("output");const abortButton = document.getElementById("abort");fileInput.addEventListener("change", () => {  const xhr = new XMLHttpRequest();  xhr.timeout = 2000; // 2 seconds  // Link abort button  abortButton.addEventListener(    "click",    () => {      xhr.abort();    },    { once: true },  );  // When the upload starts, we display the progress bar  xhr.upload.addEventListener("loadstart", (event) => {    progressBar.classList.add("visible");    progressBar.value = 0;    progressBar.max = event.total;    log.textContent = "Uploading (0%)…";    abortButton.disabled = false;  });  // Each time a progress event is received, we update the bar  xhr.upload.addEventListener("progress", (event) => {    progressBar.value = event.loaded;    log.textContent = `Uploading (${(      (event.loaded / event.total) *      100    ).toFixed(2)}%)…`;  });  // When the upload is finished, we hide the progress bar.  xhr.upload.addEventListener("loadend", (event) => {    progressBar.classList.remove("visible");    if (event.loaded !== 0) {      log.textContent = "Upload finished.";    }    abortButton.disabled = true;  });  // In case of an error, an abort, or a timeout, we hide the progress bar  // Note that these events can be listened to on the xhr object too  function errorAction(event) {    progressBar.classList.remove("visible");    log.textContent = `Upload failed: ${event.type}`;  }  xhr.upload.addEventListener("error", errorAction);  xhr.upload.addEventListener("abort", errorAction);  xhr.upload.addEventListener("timeout", errorAction);  // Build the payload  const fileData = new FormData();  fileData.append("file", fileInput.files[0]);  // Theoretically, event listeners could be set after the open() call  // but browsers are buggy here  xhr.open("POST", "upload_test.php", true);  // Note that the event listener must be set before sending (as it is a preflighted request)  xhr.send(fileData);});