Upload Images with React & Node JS to AWS S3
Vložit
- čas přidán 27. 07. 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.
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).
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
Github: github.com/nikitapryymak
Support Me: www.buymeacoffee.com/nikitadev
Contact Me: nikitadev292@gmail.com
#react #aws #nodejs - Věda a technologie
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!
This was fantastic, thank you. I was able to get uploading and downloading working in my own app!
that’s awesome to hear!
Great video but you used a lot of extensions that automate import and stuff from which I couldn't follow your code
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, i was looking all day on how to fetch the images back, finally found good tutorial!
wow, Would appreciate if you can tech us how to add Lambda function for this
Why still use axios when you can use fetch?
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.
How do you do this but using Websockets ?
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
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”
I am facing some memeory leak from this approach when hosted on EC2.
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!!
Thank God man, you saved me 🙏
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
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
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
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
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
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.
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