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

Add upload progress callback #183

Open
psixdev opened this issue Oct 5, 2019 · 17 comments
Open

Add upload progress callback #183

psixdev opened this issue Oct 5, 2019 · 17 comments
Labels
enhancement New feature or request help wanted Extra attention is needed

Comments

@psixdev
Copy link

psixdev commented Oct 5, 2019

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

@sholladay
Copy link
Collaborator

Did you try the onDownloadProgress callback?

@sholladay sholladay added the question Further information is requested label Oct 6, 2019
@psixdev
Copy link
Author

psixdev commented Oct 6, 2019

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

@sholladay
Copy link
Collaborator

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.

@sholladay sholladay changed the title Is there any way to find out the progress of loading FormData? Add upload progress callback Oct 7, 2019
@sholladay sholladay added enhancement New feature or request and removed question Further information is requested labels Oct 7, 2019
@sindresorhus sindresorhus added the help wanted Extra attention is needed label Nov 7, 2019
@Qix-
Copy link

Qix- commented Nov 12, 2019

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
Copy link
Collaborator

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-
Copy link

Qix- commented Nov 12, 2019

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

@sholladay
Copy link
Collaborator

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
Copy link

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

@SupertigerDev
Copy link

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

@Qix-
Copy link

Qix- commented Dec 9, 2020

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

@SupertigerDev
Copy link

SupertigerDev commented Dec 9, 2020

🤷 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
Copy link

shresthapradip commented Mar 31, 2021

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
Copy link

Please make this :D

@sholladay
Copy link
Collaborator

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
Copy link

nickchomey commented Dec 1, 2022

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
Copy link

Murderlon commented Oct 12, 2023

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
Copy link

@Murderlon #632 would you mind giving a review?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request help wanted Extra attention is needed
Projects
None yet
Development

No branches or pull requests