Use server actions to generate a signed url, then upload your image straight to s3 from the front-end to avoid overloading your serverless functions.
This is a complete tutorial on how to use S3 to Get, Put, and Delete files in your Next.js 14 applications. I'll show you how to make this work with images and videos, but these techniques will work with any file type.
Code and references: https://www.nexttonone.lol/upload-s3
Join this channel to help me make more videos and get access to some videos early: https://www.youtube.com/channel/UC6aTLuI_j4-0wiDSzmaPctQ/join
Chapters:
- 0:00 Intro
- 1:08 Referencing the file
- 2:31 File Preview
- 4:35 Create S3 Bucket
- 8:25 IAM Credentials
- 12:24 Next Server Action
- 15:28 Signed URL & Upload
- 21:27 File Requirements & Restrictions
- 26:08 Unique File Names
- 28:45 Save to Database
- 42:51 SQL Queries
- 44:19 Delete File
- 49:16 Summary