Add upload progress callback

[psixdev]

Hello, I would like to add an image loading indicator. Is this possible when using this library?

[sholladay]

Did you try the onDownloadProgress callback?

[psixdev]

Sorry, it seems I did not ask the question correctly. I need upload progress, not download progress. And onDownloadProgress doesn't help me.

[sholladay]

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.

[Qix-]

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.

[sholladay]

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.

[Qix-]

As long as we can determine the total bytes to be uploaded then absolutely :)

[sholladay]

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.

[aldipower]

Really missing this for File uploads. You possible solution sound great @sholladay .

[SupertigerDev]

can this be added yet? axios seems to have this feature.

[Qix-]

@supertiger1234 You are perfectly allowed to submit a PR, yes :)

[SupertigerDev]

🤷 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.

[shresthapradip]

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?

[IRediTOTO]

Please make this :D

[sholladay]

For anyone who wants to try implementing this, take a look at #34 and use that as a reference. Once there's a rough draft, I'd be happy to review and help with the code.

[nickchomey]

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

[Murderlon]

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)

[jadedevin13]

@Murderlon #632 would you mind giving a review?