Upload Images with React & Node JS to AWS S3
ฝัง
- เผยแพร่เมื่อ 11 ก.ค. 2024
- 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 - วิทยาศาสตร์และเทคโนโลยี
10 secs into the video and I'm amazed by the design. Simple but so beautiful. Well, time watch the rest of the video
thanks so much, Luiz!
Wow, i was looking all day on how to fetch the images back, finally found good tutorial!
This was fantastic, thank you. I was able to get uploading and downloading working in my own app!
that’s awesome to hear!
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.
wow, Would appreciate if you can tech us how to add Lambda function for this
Thanks for the video! really good!
How are you opening the backend terminal on 16:08?
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”
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?
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.
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
Thank God man, you saved me 🙏
How do you do this but using Websockets ?
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.
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
@@nikita-dev
Thank you very much it works!!
can we combine the s3 resizing project with this?
So that when we upload a file it automatically resizes and give the resized image
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
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.
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
@@nikita-dev thanks
I am facing some memeory leak from this approach when hosted on EC2.
Very nice video, now I can add new pictures and display it in frontend. But how to delete that pictures from aws s3?
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
When you show the images using presigned url, when the time expires after some time.. could user still see the picture?
Nope, a new presigned URL needs to be generated once the old one expires
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!
Got it figured.
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
do you have your AWS_PROFILE env variable set?
@@nikita-dev I did set the AWS_Profile but I'm also getting the same error
Hello, I am getting 404 Not Found error till 16:33 time stamp. Any help would be appreciated. Thanks
I have resolved the issue, and working fine. Thanks
How did you resolve this? I am getting the same error. Thanks in advance!
@@ashishgarg2471 Hi hello! i had the same error, how do you resolve this? many thanks!! =)
Will this work if i want to upload videos like we do in youtube ? 🤔🤔
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 :)
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.
if toast is not working try adding, {description: "alskjdfklasjdf"}
property