Building an upload backend service with No libraries, No forms, just vanilla JS with progress)

OK, I lied I used the HTTP and the fs library on node js but nothing on the backend but nothing but the built-in functions on the browser.

In this video, I’ll build a simple progressor upload service and explain how it works. Let us have fun.

Source Code

Resources

0:00 Intro
3:00 Preparing Frontend/Backend
7:00 Reading file with FileRead in Frontend
14:00 Slicing the file into Chunks
19:00 Sending Chunks through fetch to Backend
23:00 Received Chunks on Backend
28:00 Progress on Frontend
30:00 Increase chunk size
31:00 Possible Improvement and Scalability

'

Become a Member on YouTube

🔥 Members Only Content

Support my work on PayPal

🧑‍🏫 Courses I Teach

🏭 Backend Engineering Videos in Order

💾 Database Engineering Videos

🎙️Listen to the Backend Engineering Podcast

Gears and tools used on the Channel (affiliates)

🖼️ Slides and Thumbnail Design
Canva

🎙️ Mic Gear
Shure SM7B Cardioid Dynamic Microphone

Cloudlifter

XLR cables

Focusrite Audio Interface

📷 Camera Gear
Canon M50 Mark II

Micro HDMI to HDMI

Video capture card

AC Wall for constant power

Stay Awesome,
Hussein

[_quick-math]

Please never stop doing this "from scratch" videos! They are super helpful and I love learning more about this from your videos.

[greatnile]

never judge a book by its cover!
the first moment I saw the title of the video I felt disappointed🤦🏽‍♂️ as you are known by the low-level guy (at least for me) and I thought you gonna do the same video that everyone on the internet record right now 😀. to be honest I totally regreted that feeling after 2 or 3 minutes 😀.

thank you. this is an eye opener.

I would suggest that you keep building on top of this and make another video for building the distributed stateless upload service. and from the frontend side you can utilize some DS concepts like queue to receive the chunks and release/send them in a controlled manner.

it could also be nice to explain the similarities between this approach and the native multipart/form-data.

again, thanks a million for all of your amazing content. 😍

[denilsoncosta]

I always use form data to upload a file, but this way is more scalable and give you more control. I will wait more videos like this one.

[FadlySansan]

This is nice continuity from node http and node fetch! Thank you, I learned a lot from your contents

[jcollins]

You have no idea how helpful it is that you mention "this is a custom header". So many guys forget to identify vs custom in many respects of programming

[njayman]

I started learning api from express ignoring the core nodejs modules. Now i see how important this was for me to learn all these. Thanks a lot for this video.

[Flankymanga]

i was not previously interested in node.js but seeing Hussein videos - i am starting to catch a glimpse...

[mitulp]

OMG😱, This is amazing, loving your content Hussain

[UIGems]

Thanks! Amazing video... I really enjoyed to the core! Gave me insight and motivation to learn more :)

[fuadcs]

Many of my friends complains that your videos are too lengthy and you speak too slowly, but I always say to them that your videos are like watching movies which are full of knowledge and fun.

[JyotinderSingh]

This is a really valuable video. Not just because you show how to build an upload service with vanilla JS but also because of the last 10 mins where you explain how one can take it forward. Thanks Hussein!

[subhamprasad]

I was waiting for this video... Thank you

[nirajkhatiwada]

This one is too funny and knowledgeable. I love it.

[vfryhn]

This is amazing, could you please show how multipart-form work?

Thank you for your content

[castmonkeys]

your old soul (mimir from GOWr) is occasionally kicking in! lol. BTW very great content!

[talalnajam]

Hands down one of the best (if not the best) channels on youtube

[gabrieljose]

Awesome video, we need more content like this. If you think that is a good idea i'll love to see another video doing this in the "right way" or at least the way you explain in the ending of the video!!!

[borisc]

Great stuff! Something that I've been looking at, but with multiple file upload and directories. I like the commentary about scalability, though a database seems like overkill

[Porkchop]

you make such good content!
but I swear, the spaces in your html attributes trigger my fight or flight!
keep up the great work 👍

[mohammadsalah]

Amazing video. This video would have saved me a lot of time of searching a year ago