Document XMLHttpRequestUpload

[teoli2003]

Description

Document XMLHttpRequestUpload and its events

Motivation

openwebdocs/project#152

[github-actions]

Preview URLs (11 pages)

• /en-US/docs/Web/API/XMLHttpRequest/send
• /en-US/docs/Web/API/XMLHttpRequest/upload
• /en-US/docs/Web/API/XMLHttpRequestEventTarget
• /en-US/docs/Web/API/XMLHttpRequestUpload/abort_event
• /en-US/docs/Web/API/XMLHttpRequestUpload/error_event
• /en-US/docs/Web/API/XMLHttpRequestUpload/load_event
• /en-US/docs/Web/API/XMLHttpRequestUpload/loadend_event
• /en-US/docs/Web/API/XMLHttpRequestUpload/loadstart_event
• /en-US/docs/Web/API/XMLHttpRequestUpload/progress_event
• /en-US/docs/Web/API/XMLHttpRequestUpload/timeout_event
• /en-US/docs/Web/API/XMLHttpRequestUpload

(comment last updated: 2023-04-04 10:23:59)

[dawei-wang]

Add missing word

[Elchi3]

First impression: Looks great! Do we want to repeat the (rich) example on all sub pages, though?

[teoli2003]

First impression: Looks great! Do we want to repeat the (rich) example on all sub pages, though?

I was unsure. i can keep only the js with some of the events?

[Elchi3]

First impression: Looks great! Do we want to repeat the (rich) example on all sub pages, though?

I was unsure. i can keep only the js with some of the events?

I think we often put snippets. Maybe something like this for the loadend page:

Examples

Using the loadend event

You can use the loaded event hide the progress bar when an upload finished. For a complete code example that uploads a file, see the main XHR upload page.

xhr.upload.addEventListener("loadend", (event) => {
  progressBar.classList.remove("visible");
  if (event.loaded !== 0) {
    log.textContent = "Upload finished.";
  }
  abortButton.disabled = true;
});

[Elchi3]

Some nits. I think this looks good otherwise. It is mostly analog to XHR, I believe.