Track Fetch Request Download Progress + Progress Bar | JavaScript Tutorial

This tutorial shows you how to monitor the progress of a fetch request download and create a CSS progress bar to display progress.
#fetch #download #progress #progressbar #javascript #javascript_tutorial #webdevelopment #tutorial

⚡ NEW: Web development courses from Meta Inc. ⚡

[jame_sta]

Thank you very much! Not many tutorials about this on the web using real data.

[OpenJavaScript]

For upload progress, this isn't yet possible with fetch, but you can get it with:

[viniciusm.m.]

Wow. Maybe i can understand all these JS code until next year haha
Thanks, bro!
Abraço!

[longsuabc]

Wow, very useful, understandable and easy.!!!
You're super!
Thank you for sharing.

[richardfigueroa]

This could be done when obtaining data from the DB, monitoring approximately how long the request will take or it only works with files.

[jacoblindegren]

Question, so this is reading back the content that we are receiving from the url. What if we want to read the content being sent to a url? For instance I am sending files to a server, which is then doing some work to create thumbnails of the images and save them to an S3 bucket on AWS. Is it possible to read that progress in the body of the fetch? Or shall I stick to an XMLHttpRequest?

[BrightAnyawe]

Bro, why use the spread operator on the response => header?

[akshay__sood]

Wouldn't this solution abuse the RAM when downloading a large file of let's say 10 GB?

[iwilldowhatiwannado]

presigned url 사용해서 다운로드할 때, 몇 퍼센트 다운로드 됐는지 확인할 방법이 있을가요..?ㅠ

[coffeeandtalk]

that's why i'm grateful for axios