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