upload progress?

[radubrehar]

Is there any way I can attach a progress listener to the xhr.upload object used in fetch?

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

since I use fetch to upload files (with FormData), I would find this very useful.

I initially reported this at JakeChampion/fetch#89, and was suggested to have it reported here

[annevk]

The native fetch() API implemented by browsers does not use XMLHttpRequest underneath. The eventual API for progress is building something on https://streams.spec.whatwg.org/ which https://github.com/yutakahirano/fetch-with-streams/ is adding to fetch().

[cusspvz]

The native fetch() API implemented by browsers does not use XMLHttpRequest underneath.

But yet, it does not mean it couldn't be pondered and proposed.

Native promises are not yet cancellable and/or progressed, so my proposal would be for a callback on the second argument object of fetch which would receive a ProgressEvent (which is already present because of XHR).

As a polyfill, it could be easily placed with the progress event listener as stated by the OP.

API Example:

aync fetchSometing ( form ) {
  const res = await fetch('/upload', {
    method: 'POST',
    body: form,
    progress: (e) => { console.log(`Progress: ${e.loaded/e.total}%`) }
  })
}

[ilan-schemoul]

So why @cusspvz's idea doesn't seem to have been taken in consideration ?
It seems a good idea to me.

[jakearchibald]

Discussion around fetch observation is over at #447.

[caub]

The discussion in #447 was more about fetch cancellation, now it's added in the spec with AbortController

For fetch upload progress, it would be great, that's the only missing thing compared to XHR

[annevk]

Ah, thanks for pinging this thread. Observation moved to #607. Hope that helps.

[oliverjanik]

Please reopen this issue. This is real world scenario on millions of websites daily. Fetch needs needs an upload progress. period. We've been stuck with the bad XHR API for decades now.

Yet, no one seems concerned that despite all the efforts and years of debates that went into fetch it does not deliver.

Can everyone on this committee stop treating it as a hot potato a deal with it.

[annevk]

There is no committee… And this issue is closed because there is a more focused issue around a concrete proposal towards addressing this.

[mindtonic]

@oliverjanik Use the .on('progress', ...... ) feature of Superagent. https://github.com/visionmedia/superagent

[oliverjanik]

No thanks, I like my batteries included.

[xgqfrms]

https://github.com/AnthumChris/fetch-progress-indicators

[oliverjanik]

@xgqfrms I only see download progress, where is upload progress ?

@annevk What proposal are you talking about? Can you post a link?

[annevk]

#21 (comment)

[TestPolygon]

It can be done if browsers will start support ReadableStream for Request object's body.

Currently there is only support of ReadableStream for Response object's body and you can use it for checking download progress.

They should implement that:
https://fetch.spec.whatwg.org/#bodyinit

Check your browser:
https://w3c-test.org/fetch/api/basic/request-upload.any.html

So, waiting for the browser support, in this case you even do not need something like this: #607

See also: #425