Chunked File Upload with React and Express.js

[@StefanGraf2]

This was a great help to make my own React component to upload very large files (4+ gb) in chunks instead of one big file.

[@CodingWithDawid]

For sure. I think browsers would struggle to upload this much in one chunk. And there would be some limitations on the backend server too

[@StereoWorld]

Big fan of your videos sir. But i wonder why haven't you gained so popularity like others do, makes me feel sad to see a talented web developer with such less recognition.

[@CodingWithDawid]

I guess it will come with time 🤷🏻‍♂️ Until then I want to thank you for your kind words. It motivates me to stay consistent and to create more videos for people like you. I hope you learned something useful from my videos that will help you to build something awesome in the nearest future! Take care and keep coding!

[@adityadubey2488]

Always making sure to like and comment.

[@CodingWithDawid]

Thank you! 🙂

[@promods96]

Hi Dawid, Thank you so much for the content. One small doubt, after slicing the file any reason why we are using readAsDataURL? Can't we just directly send the sliced blob ?

[@turki8542]

lets say i want to have my back-end with Django. how can i do it?. Thanks

[@turki8542]

thank you so much man for this video but i want to know what if i want to send this info to a database and from the database back to the ui how can i take the bytes from the database and convert it to display it on the screen? thanks.

[@CodingWithDawid]

You shouldnt put files into a database. Use s3 or something similar for file storage and then store s3 links in your database

[@ropen81]

Great content! Is there any reason why you chose to send the data using readAsDataURL instead of readAsArrayBuffer?

[@CodingWithDawid]

I like to send encrypted blobs/binaries to see whats its actually sent in more human readable format

[@ropen81]

@@CodingWithDawid Thanks!

[@tahaahmadi7446]

Hi Dawid, at first thanks you so much for sharing your skills with us, for this code, after uploading whenever I want to stream it It doesnt work, also file size after upload is not same the orginal file

[@araxyso]

Can you try to make it so it’s compatible with iPhones like where you click the box it’ll become a button then it’ll show like options to use your iPhones file manager or browser some where?

[@CodingWithDawid]

You can just put a instead of the drop area or inside the drop area. The events are most likely the same for the inout as they are for the dropzone

[@araxyso]

@@CodingWithDawid ah alright thanks

[@aashishpaudyal5306]

Is it gurenteed that the file chunks are received in order? If it doesnot then file won't be currupted ?

[@CodingWithDawid]

Yes. The next chunk/part will not start uploading before the previous one is not succesfully uploaded

[@RogerioTadim]

owesome!

[@korogomo4583]

good job man

[@CodingWithDawid]

Thank you!

[@david-tracy]

Great. Do u suggest uploading a zip file this way? ... or is this approach more for live streaming types of applications..? The zip file has multiple files in it (in case that info helps to determine an answer). The zip file that contains source code for a medium/small sized application. I want to upload the zip to my server / storage.

[@CodingWithDawid]

Yes. It should work with zip files too! 🙂

[@david-tracy]

@@CodingWithDawid thank u man. I appreciate it!

[@chawza8402]

on iterating the chunks, why do you use useEffect? not a simple loop? What I see it's really complicated that you track the chunk index using states and useEffect where you use every where. I'm still trying to understand your code and it seems there is there is something obvious that I miss. What in my mind is that, in the client side, we can iterate the sliced blob inside the readAndUploadChunks() which inside use axios that sends the chunk. Although I learn alot on the backend part where you ssave each chunk temporarily on the disk and rename it afterward, but the client side is more complicated that it seems

[@CodingWithDawid]

what useEffect do you mean exactly? I mainly use state/useEffect so the app re-renders and shows the progress. i guess that a loop would for fine as well, but you would just need to update state to inform the app about the progress

[@chawza8402]

@@CodingWithDawid thats make sense. Maybe when I watch the video I got confused by many states (states that track files). Thanks for the video. I have implement the similar code as your but fetching inside the loop and it works well.

[@sundeeepu]

@@chawza8402 Could you please share the github link of that code you have done with loops. Sir!

[@uuach731]

Does anyone know what theme is similar to this in VScode?

[@CodingWithDawid]

The name of the theme is "One Dark Pro Italic Vivid" so maybe this one will work: marketplace.visualstudio.com/items?itemName=jsjlewis96.one-dark-pro-italic-vivid

[@crazyshala4571]

Really good content man really appreciate can you make a video on streaming video from node to react site

[@CodingWithDawid]

Really interesting idea! I will look into it. Thanks!

[@devindissanayaka8116]

Im lookimg for a way to download big files from url as chunks and upload them to google drive in heroku like mirror telegram bots. can you make a tutorial how to do that please 🙂

[@phamngocson8366]

I have this problem, I upload about 50 files and one file is 3.5 MB. But when I uploaded all of file, Chrome is crash. Can you help me solve this issue?

[@CodingWithDawid]

Are all other files also around 3.5MB in size? Do you get any error in you browser console?

[@phamngocson8366]

@@CodingWithDawid Yes. when I uploaded new data , chrome memory did not clear and memory grow. I want clear memory chrome when I upload new data.

[@mohamedyoussef8835]

Awesome video ++++++++++++++ 🙂

[@CodingWithDawid]

thank you!

[@log-o2d]

can i get source code? i have got some error when i upload files

[@CodingWithDawid]

Here: github.com/dejwid/mern-chunked-upload

[@log-o2d]

@@CodingWithDawid thank you

[@haiderjaafer8164]

Great work keep going forward… is it working on pdf files

[@CodingWithDawid]

Thank you! Yes it should work with all file types

[@haiderjaafer8164]

@@CodingWithDawid How to save files into MySQL and browse that file and show it

[@guruswamihiremath2743]

Thank you

[@CodingWithDawid]

Thank YOU for watching! 🙂

[@jacekjakubiak7974]

You write quite fast, and it is really enjoyable to watch you, but you could separate http logic and make it cleaner.

[@CodingWithDawid]

Thanks! You mean to split the backend functionality into smaller chunks?

[@paltan_team]

yes@@CodingWithDawid

[@赵阳-m1v]

good ,thank you. but i neet a source code

[@CodingWithDawid]

github.com/dejwid/mern-chunked-upload

[@ctnava]

Coding with Davie504