Это видео недоступно.
Сожалеем об этом.
Download Progress Bar in React with Fetch API
HTML-код
- Опубликовано: 30 авг 2023
- Build a progress bar for downloads using the Fetch API and Streams in React.
We'll walk through downloading a file programmatically to the visitors filesystem, streaming the file download using the Fetch API, inspecting the amount of data received to the browser in chunks, and learning how to throttle state updates for improved performance in React.
📺 RUclips: ruclips.net/user/co...
🐦 Twitter: / colbyfayock
📹 Twitch: / colbyfayock
✉️ Newsletter: www.colbyfayoc...
🎥 What I Use: www.colbyfayoc...
#colbyfayock #reactjs #webdevelopment
Learn how to build a full stack Next.js app in my upcoming course: colbyfayock.com/course
Dude you're the GOAT. You're my new favourite RUclipsr!
🙏
Awesome, such a simple and elegant approach.
thank you!
Possibly a silly question, but by the time the 'const response = await fetch(...)' request has completed, isn't the file already downloaded on the client side? (so the 'progress' bar is only related to writing the file from local browser memory to the local file system?)
the progress would be from writing from network to local browser memory, then that result is downloaded from memory
Your videos are such a treat. Amazing
thank you :)
Very useful. Thanks for sharing!
no problem!
Followed along the video and am getting cors error while fetching a image, any idea on how do we fix it?
the image request itself is getting a CORS error? dont usually hear about CORS issues related to images. i would expect that to be a configuration issue or they're intentionally blocking the image from being requested from another source. hard to know for sure without understanding more about how the image is being delivered
this is why I sometimes use axios still, getting progress is so much more simple
true!
Amazing tutorial, thank you :)
No problem! 🙌
great idea , but there is the problem of downloading it twice , both fetch and a.click?
the download from the remote server only happens once, after the fetch its stored in the browser, which will then save it to the filesystem
that's sound awesome , this is the solution i'm looking for , thanks a lot man @@colbyfayock
Can you share me the source code ? Thank you so much
i accidentally deleted it locally 😭 but ive been meaning to write a supplemental article for this video, i just haven't got to it yet. will publish it at spacejelly.dev at some point hopefully soon
Code
don't have this one in a repo right now