Upload Images with React & Node JS to AWS S3

In this video you'll learn how to create a responsive user interface using React and Chakra UI, and a Node JS backend that handles image uploads. You'll also learn how to store and retrieve images from AWS S3.
UPDATED - After making this video, I realized that using a presigned URL for uploading an image is a much better approach, since the image will be uploaded directly to S3 (instead of to our API, which then sends it to S3). With this approach, a new endpoint needs to be created to generate a presigned url for PutObject(), and return that to the frontend. Then the frontend will upload the image using that URL instead of hitting our API.

Additionally, instead using presigned URLs to view images, a Cloudfront cache should be set up (with our S3 bucket as the origin). That way you will get the benefits of using a CDN (reduced latency, cost, etc).

Setup AWS Credentials:

0:00 Intro
0:42 React Upload Image Button
13:44 API - Image Upload Endpoint
16:34 AWS S3 Bucket
17:12 AWS SDK
24:20 React - Fetching Images
28:17 AWS Presigned URLs
36:56 React Image Components
39:09 Trigger Image Refetching
41:09 Sort AWS S3 Files

#react #aws #nodejs

[luizsoares]

10 secs into the video and I'm amazed by the design. Simple but so beautiful. Well, time watch the rest of the video

[alphacentauri]

Wow, i was looking all day on how to fetch the images back, finally found good tutorial!

[jamesleakos]

This was fantastic, thank you. I was able to get uploading and downloading working in my own app!

[luizsoares]

Your video helped a lot. Managed to implement it on my app and it works wonderfully. I am trying to change it a bit so I can upload multiple files. I believe I don't need to send the files in a loop 1 by 1. Can you tell me if I have to change the Body property on the command? Thank you very much.

[maheshraut]

I have done store deta in s3 bucket by the documentation but after that i want to make gallery like you for that get objects from bucket to my react app i want. For that i saw your full video but i cant do that because i dont know Axios, fletch how you uesd that can you help me....for retrive deta and display gallery in web app

[regilearn]

wow, Would appreciate if you can tech us how to add Lambda function for this

[VoixDeLaNation]

How do you do this but using Websockets ?

[fiddler-dvor]

Great video! Thank you! Do I have to use a BE server to load and query the S3 bucket? Can I save a hope by do this on the client?

[yashvadaria]

I am facing some memeory leak from this approach when hosted on EC2.

[BruceKomesu]

Thanks for the video! really good!
How are you opening the backend terminal on 16:08?

[daeun]

When you show the images using presigned url, when the time expires after some time.. could user still see the picture?

[lohithvarma]

can we combine the s3 resizing project with this?
So that when we upload a file it automatically resizes and give the resized image

[antonellagiovannetti]

Hello, thank you for your excellent video. I'm following your step by step tutorial and I have a problem, when I upload my image it doesn't save in s3. Here is my error: CredentialsProviderError: Could not load credentials from any providers. Thank you very much for your answer.

[Angaragz]

how long the images will be stored in the memory storage? do they are automatically cleared from memory storage. if not, than it will increase the load on the server.

[pawefojt]

Very nice video, now I can add new pictures and display it in frontend. But how to delete that pictures from aws s3?

[carlito.pedida-personal]

Hi, I'm still getting the 404 error even after writing the endpoints in the app.mjs. The console is not logging an error but the page is displaying a 404. Any advice? Thanks!

[jiwonkim]

At 23:01 I get an error of "Error: Region is missing". Both my config and credentials files have region = us-east-1 so I'm not sure why it isn't working

[ashishgarg]

Hello, I am getting 404 Not Found error till 16:33 time stamp. Any help would be appreciated. Thanks

[lal]

if toast is not working try adding, {description: "alskjdfklasjdf"}
property

[vinayakhegde]

Will this work if i want to upload videos like we do in youtube ? 🤔🤔