Upload Images with React & Node JS to AWS S3

Рет қаралды 17,557

Күн бұрын

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.
Starting Files: github.com/nikitapryymak/reac...
Finished Files: github.com/nikitapryymak/reac...
Setup AWS Credentials:
docs.aws.amazon.com/cli/lates...
AWS S3 SDK: docs.aws.amazon.com/AWSJavaSc...
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
Contact Me: onelightwebdev@gmail.com
Github: github.com/nikitapryymak
Support Me: www.paypal.com/paypalme/nikit...
#react #aws #nodejs

Пікірлер: 40

@luizsoares4847 Жыл бұрын

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

@nikita-dev Жыл бұрын

thanks so much, Luiz!

@jamesleakos7119 Жыл бұрын

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

@nikita-dev Жыл бұрын

that’s awesome to hear!

@luizsoares4847 Жыл бұрын

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.

@regilearn2138 29 күн бұрын

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

@alphacentauri8035 7 ай бұрын

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

@fiddler-dv4or Жыл бұрын

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?

@nikita-dev Жыл бұрын

Yes, a backend server is necessary (at least in this scenario) because you need to securely use AWS credentials to access the S3 bucket, and you wouldn't want to expose the credentials to the browser.

@BruceKomesu Жыл бұрын

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

@nikita-dev Жыл бұрын

I had a VS Code terminal open and I split the pane, and then navigated to the “frontend” folder and the left side, and the “backend” folder on the right side. once in the backend directory, I just ran “npm run dev”

@maheshraut8335 Жыл бұрын

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

@VoixDeLaNation Жыл бұрын

How do you do this but using Websockets ?

@antonellagiovannetti992 Жыл бұрын

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.

@nikita-dev Жыл бұрын

It seems like the SDK is not grabbing the credentials from your machine. Have you installed the AWS CLI and set up an AWS profile (with credentials) on your machine (by running the "aws configure" command)? To check if you have the CLI installed, run "aws --version" Here are the steps in case you haven't: Install the AWS CLI: docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html Configure AWS Credentials on Your Machine: docs.aws.amazon.com/cli/latest/userguide/getting-started-quickstart.html

@antonellagiovannetti992 Жыл бұрын

@@nikita-dev Thank you very much it works!!

@pawefojt8757 Жыл бұрын

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

@nikita-dev Жыл бұрын

you would have to call the DeleteObjectCommand from the SDK: docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/clients/client-s3/classes/deleteobjectcommand.html You can also delete them manually through the AWS Console

@Angarag9z Жыл бұрын

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.

@nikita-dev Жыл бұрын

The images are removed from memory as soon as the request is finished. However, if your application is storing very large files (or many small files in a short amount of time), you may run into memory issues. To help prevent that, you can set limits on the file size in the multer config

@Angarag9z Жыл бұрын

@@nikita-dev thanks

@yashvadaria7043 Жыл бұрын

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

@lohithvarma2026 4 ай бұрын

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

@nikita-dev 4 ай бұрын

Yes, but I wouldn't use the signed URL approach (for fetching images)... You should use a cloudfront distribution with an S3 origin, and the lambda would save the resized images to that origin bucket. Then the frontend app will fetch the images through cloudfront

@daeun9275 Жыл бұрын

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

@nikita-dev 10 ай бұрын

Nope, a new presigned URL needs to be generated once the old one expires

@mjftw9473 9 ай бұрын

Thank God man, you saved me 🙏

@carlito.pedida-personal 6 ай бұрын

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!

@carlito.pedida-personal 6 ай бұрын

Got it figured.

@jiwonkim4074 9 ай бұрын

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

@nikita-dev 8 ай бұрын

do you have your AWS_PROFILE env variable set?

@SandaDevOps 2 ай бұрын

@@nikita-dev I did set the AWS_Profile but I'm also getting the same error

@ashishgarg2471 Жыл бұрын

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

@ashishgarg2471 Жыл бұрын

I have resolved the issue, and working fine. Thanks

@carlito.pedida-personal 6 ай бұрын

How did you resolve this? I am getting the same error. Thanks in advance!

@kaitan4690 5 ай бұрын

@@ashishgarg2471 Hi hello! i had the same error, how do you resolve this? many thanks!! =)

@lal9835 Жыл бұрын

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

@vinayakhegde4216 Жыл бұрын

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

@vinayakhegde4216 Жыл бұрын

My project is OTT platform in mern stack and i want to run shortflims or regional movies (small scale movies) on my site .Is it possible ? with just mern stack and aws s3? I am new to this technology so just want clarify some doubt :)

@nikita-dev 10 ай бұрын

Yes, it is possible. You'll want to set up a CloudFront distribution in front of your S3 bucket to improve performance and reduce costs.