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).
Starting Files: https://github.com/nikitapryymak/reac...
Finished Files: https://github.com/nikitapryymak/reac...
Setup AWS Credentials:
https://docs.aws.amazon.com/cli/lates...
AWS S3 SDK: https://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: https://github.com/nikitapryymak
Support Me: https://www.buymeacoffee.com/nikitadev
Contact Me: [email protected]
#react #aws #nodejs
Watch video Upload Images with React & Node JS to AWS S3 online, duration hours minute second in high quality that is uploaded to the channel Nikita Dev 20 October 2022. Share the link to the video on social media so that your subscribers and friends will also watch this video. This video clip has been viewed 19,915 times and liked it 403 visitors.
