Fetch: upload progress?

Created on 20 Feb 2015 · 14Comments · Source: whatwg/fetch

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 https://github.com/github/fetch/issues/89, and was suggested to have it reported here

Source

radubrehar

👍25

Most helpful comment

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}%`) }
  })
}

cusspvz on 30 Mar 2017

👍27 🚀1 ❤1

All 14 comments

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().

annevk on 20 Feb 2015

👎8 👍2

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.

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}%`) }
  })
}

cusspvz on 30 Mar 2017

👍27 🚀1 ❤1

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

NitroBAY on 1 Jul 2017

Discussion around fetch observation is over at https://github.com/whatwg/fetch/issues/447.

jakearchibald on 1 Jul 2017

👍3 😕2 👎2

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

caub on 15 Apr 2018

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

annevk on 15 Apr 2018

👍2

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.