HTML progress Element: Progress Bars and Upload Progress

<form id="upload-form" action="https://splitforms.com/api/submit" method="POST"
      enctype="multipart/form-data">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">

  <label for="file">Choose a file</label>
  <input type="file" id="file" name="file" required>

  <label for="bar">Upload progress</label>
  <progress id="bar" value="0" max="1">0%</progress>
  <output id="pct" for="bar">0%</output>

  <button type="submit">Upload</button>
</form>

<script>
  const form = document.getElementById("upload-form");
  const bar = document.getElementById("bar");
  const pct = document.getElementById("pct");

  form.addEventListener("submit", (event) => {
    event.preventDefault();
    const data = new FormData(form); // every named field, access_key and file included

    const xhr = new XMLHttpRequest();
    xhr.open("POST", form.action);
    xhr.setRequestHeader("Accept", "application/json");

    // fetch() has no upload progress event in most browsers, so use XHR here
    xhr.upload.onprogress = (e) => {
      if (e.lengthComputable) {
        bar.value = e.loaded / e.total;
        pct.textContent = Math.round(bar.value * 100) + "%";
      } else {
        bar.removeAttribute("value"); // size unknown: show the busy state
      }
    };
    xhr.onload = () => {
      bar.value = 1;
      pct.textContent = xhr.status < 400 ? "Done" : "Upload failed (" + xhr.status + ")";
    };
    xhr.onerror = () => { pct.textContent = "Network error"; };

    xhr.send(data);
  });
</script>