File Uploads with React, Node, and AWS S3

CourseLift is a product I'm building for course authors to build and sell their online courses. One of the features I need to support is file uploads.

In this video, I show how I've wired together file uploads in a React and Node application using Dropzone, AWS S3, Bull, and Muse.

Check out CourseLift

[ErnestoBalanzar]

Yes! can you show more of these type of videos! this is amazing!

[aaronmotacek]

Thank you so much for sharing this. I was trying to get file uploads working a while back, but ended up putting it on pause because I was just having too much trouble (first time implementing file uploads ever, was trying using multer, fs, etc.). I got file upload up and running in just a few minutes with this video, with the added benefit of learning about ProgressBar, classnames, react-dropzone, and busyboy! 🙏

[poul]

Really thanks for the great video.

I do have a question. How do you sequentially upload the multiple files to S3 one at a time? What I did was made a function to upload images to S3 then retrieved the S3 URLs then inserted them into post method form data to backend. But the problem that I encountered was it didn’t allow me to upload images one at a time and only the last file was able to retrieve the S3 URLs.

Is there any good way to upload multiple files that stores in array to S3 using map, for loop, or anything

[shivasaiprasadakula]

I was uploaded files in AWS S3 bucket and i fetched those videos to show in frontend but when i do inspect in the image tag the file url is showing so by using those image url any can copy and download the images but i want users to dont copy either they dont want to download by using the link how can i do it can you please make any video on this

[Noritoshi-rm]

How much does it cost to operate monthly +/-?

[meddhia]

Hello, Can you give me the code snippet...

[priyankachaurasiya]

What happens if network goes wrong while file upload in progress. Will it start from where it left or will have to upload file again?

[janghanpark]

I am also trying to solve this problem with axios (Not using the signed URL method - this is another story). My logic is pretty much the same. Sending file data to backend which is under /pages/api directory in my case since I am using nextjs. When I used the onUploadProgress function to show progress but the process in the function only takes care about uploading file's to my backend not amazon s3 file upload step.Therefore, the process is quickly done even before the file gets uploaded to the amazon s3 bucket. How could you solve this one?

[aryankumar]

how is it different than udemy or skillshare ( subscription based )

[marsilinouzaky]

Why not using signed url to upload directly to S3

[teetanrobotics]

can't understand. Please explain line by line