Upload Progress Bar (native alternative to Fetch using XMLHttpRequest) – JavaScript Tutorial

This tutorial shows you how you can use native JavaScript to monitor the progress of a file upload to a server and use this to update a progress bar element. The native solution is to use the XMLHttpRequest object to construct a HTTP request of type POST.
#javascript #nodejs #httprequest #tutorial #webdevelopment #xmlhttprequest #post #api #progressbar #vanillajs #vanillajavascript

⚡ NEW: Web development courses from Meta Inc. ⚡

[tomscall]

Big thanks. Worked with my node.js project right away.

[tomaszgasecki]

I really appreciate the way you explaining things, thank you!

[captainrad]

Thanks for putting this together! I haven't seen any other resources for this.

[judeleon]

Nice and straigtforward tutorial! In the video, you mentioned a library for creating progress bar for fetch API upload, and I did not get it. Can you please let me know some of the libraries that canbe used to code progress bar for fetch upload.

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

[keedik]

Very simple and clear example. Thank you for your beginner-friendly tutorial! '-']b

[spencerian]

the progress bar doesn't show up with the exact same code

[WebLego]

This uses HMLHttpRequest API not the Fetch API, the title is misleading.