How to get File upload progress with fetch() and WhatWG streams

Question

Note: I\'m not looking for any alternatives. I know this can be done with XMLHttpRequest. I also don\'t care about browser support. I just want learn about the new/upcoming

Answer 1

As Kyle said, ReadableStream uploading is not supported yet. https://github.com/whatwg/fetch/issues/95

Even if it where possible I would not try to monitor the upload progress throught streams, (that is if FetchObserver becomes a thing) Nobody is working on it right now. But Mozilla made a proposal that looks something like this.

/*
enum FetchState {
  // Pending states
  "requesting", "responding",

  // Final states
  "aborted", "errored", "complete"
};
*/

fetch(url, {
  observe(observer) { 
    observer.onresponseprogress = e => console.log(e);
    observer.onrequestprogress = e => console.log(e);
    observer.onstatechange = n => console.log(observer.state)
  }
)

I remember that i tested it using some experimental flags a long time ago but can't find the demo anymore, guess they removed it from MDN since it was there own implementation/suggestion.

Answer 2

Short answer: cannot be done right now.

Checkout the spec here: https://fetch.spec.whatwg.org/#fetch-api

Second sentence indicates that there isn't a way to track request progression when using fetch.

The fetch() method is relatively low-level API for fetching resources. It covers slightly more ground than XMLHttpRequest, although it is currently lacking when it comes to request progression (not response progression).