ky
ky copied to clipboard
sindresorhus
Add upload progress callback
Hello, I would like to add an image loading indicator. Is this possible when using this library?
Sorry, it seems I did not ask the question correctly. I need upload progress, not download progress. And onDownloadProgress doesn't help me.
I see. We don't have that feature at the moment, but it would be nice to add. I think it could be done similarly to download progress.
It cannot. ky uses fetch under the hood, which uses streams, which does not support upload progress callbacks.
Seems like a pretty bizarre thing to leave out of the spec, if you ask me. Until they're added, ky cannot support them unless it falls back to XMLHttpRequest.
I realize that fetch doesn't have a callback for upload progress, which is a shame. But I think we should be able to detect when options.body is a stream and then send it through a passthrough stream of our own that reads the chunks manually, similarly to how our onDownloadProgress option works.
I suppose if the body is just a plain stream, we'd only be able to provide how many bytes have been uploaded but not the total bytes, which may not be super useful.
However, if the body is a Blob or a File (or anything that can be normalized to one of those), then we can use blob.size to get the total bytes. And then we can use blob.stream() to get a ReadableStream for it.
Really missing this for File uploads. You possible solution sound great @sholladay .
🤷 I wouldn't even be using a lib for fetching if I knew how. I am using axios only for when uploading files. Technically i fixed my problem.
can this be added yet? axios seems to have this feature.
No, I don't think axios supports it for browser. It is only supported in nodejs. Right?
For anyone who wants to try implementing this, take a look at https://github.com/sindresorhus/ky/pull/34 and use that as a reference. Once there's a rough draft, I'd be happy to review and help with the code.
It seems this should now be possible with Chromium versions > 105. It would be great if it could be incorporated into ky!
https://developer.chrome.com/articles/fetch-streaming-requests/#streaming-request-bodies fetch() upload streaming - Chrome Platform Status (chromestatus.com)
Here's an example implementation: https://stackoverflow.com/a/52860605/19510854
It seems this should now be possible with Chromium versions > 105. It would be great if it could be incorporated into ky!
I've looked into this a bit more and it wouldn't be as easy to implement in ky. The presence of onUploadProgress would have to force the passing of duplex: 'half' to underlying fetch and force the body to be a stream. If you already have the entire file, you have to manually push it through a stream again to count the bytes. When uploading FormData, this would result in hacky conversions which I haven't gotten to work at all. Further more, supporting onUploadProgress would mean dropping support for HTTP/1.1, which frankly is unacceptable. Even giants like AWS S3 still only support uploading over HTTP/1.1.
All in all, I don't see an addition like this making sense until fetch itself exposes more control over this (such as some sort of fetch observer)
