Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

upload progress? #89

Closed
radubrehar opened this issue Feb 19, 2015 · 12 comments
Closed

upload progress? #89

radubrehar opened this issue Feb 19, 2015 · 12 comments

Comments

@radubrehar
Copy link

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, I would find this very useful.

@dgraham
Copy link
Contributor

dgraham commented Feb 19, 2015

The XHR instance is an implementation detail of the polyfill that is not exposed to callers.

The best way to upload files, with progress events, is still using XHR directly rather than fetch. You might open an issue on the Fetch API repository to request this feature, though!

@radubrehar
Copy link
Author

Thanks. I just filed an issue there.

@stefanpenner
Copy link

Progress is something that is important to me. As such also willing to implement a best-attempt polyfill today for progress likely by implementing the needed subset of a readable stream.

From reading responses to the previous issue and asking some questions is seems like: response.body will be a readable stream from https://streams.spec.whatwg.org/ and you'll also be able to provide a readable stream when creating responses too. Streams everywhere

I suspect the response.body byte stream may carry sufficient information to create reasonable progress events. That being said, from my quick reading this will likely be more be more verbose then I suspect most would want to endure. (but maybe its ok?)

// example source https://github.com/yutakahirano/fetch-with-streams/

function consume(stream, total = 0) {
  while (stream.state === "readable") {
    var data = stream.read()
    total += data.byteLength;
    console.log("received " + data.byteLength + " bytes (" + total + " bytes in total).")
  }
  if (stream.state === "waiting") {
    stream.ready.then(() => consume(stream, total))
  }
  return stream.closed
}
fetch("/music/pk/altes-kamuffel.flac")
  .then(res => consume(res.body))
  .then(() => console.log("consumed the entire body without keeping the whole thing in memory!"))
  .catch((e) => console.error("something went wrong", e))

Maybe @domenic or @jakearchibald have some ideas how this can be improved? Or how one may want to interact with it in such a way that this is easier to digest. Or how the polyfil may look.

I suspect we should assemble some examples where progress is used (data-binding/etc). This will help us craft something that is hopefully ergonomically appealing.

@axelson
Copy link

axelson commented Feb 27, 2016

Is there a current work-around if we need to track progress of a file-upload with the fetch polyfill? Or are we forced to use a different library or XHR directly?

@mislav
Copy link
Contributor

mislav commented Feb 27, 2016

@axelson Since fetch itself doesn't support progress callbacks, you're forced to use XHR directly, unfortunately. There's nothing to stop you from using 3rd-party libraries for this either, but this polyfill can't help with your need.

@olalonde
Copy link

olalonde commented Mar 8, 2016

@mislav in the meantime, would it be possible to expose the xhr object fetch uses to make this easier? I built a REST client using fetch and need to display upload progress on just one POST. It would suck having to rewrite the whole thing just for this one case.

@mislav
Copy link
Contributor

mislav commented Mar 8, 2016

To others, for posterity: @olalonde's question got answered in a separate thread: #290 (comment)

@caub
Copy link

caub commented Oct 27, 2016

I guess you could just go with

function futch(url, opts={}, onProgress) {
    return new Promise( (res, rej)=>{
        var xhr = new XMLHttpRequest();
        xhr.open(opts.method || 'get', url);
        for (var k in opts.headers||{})
            xhr.setRequestHeader(k, opts.headers[k]);
        xhr.onload = e => res(e.target.responseText);
        xhr.onerror = rej;
        if (xhr.upload && onProgress)
            xhr.upload.onprogress = onProgress; // event.loaded / event.total * 100 ; //event.lengthComputable
        xhr.send(opts.body);
    });
}

futch('/').then(console.log)

for now

@dharmax
Copy link

dharmax commented Jul 1, 2018

When will it be supported in the fetch?

@caub
Copy link

caub commented Jul 1, 2018

@dharmax whatwg/fetch is more where it should be discussed I think whatwg/fetch#21

@xgqfrms
Copy link

xgqfrms commented Oct 8, 2018

wanted native fetch methods to get the progress

@mislav
Copy link
Contributor

mislav commented Oct 8, 2018

This is not a place to request features for fetch. Instead, please head to whatwg/fetch#607

Thank you!

Repository owner locked as resolved and limited conversation to collaborators Oct 8, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

9 participants