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:
/ @sammeechward
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
🔗Moar Links
My Website: https://www.sammeechward.com
Instagram: / meech_ward
Twitter: / meech_ward
Github: https://github.com/orgs/Sam-Meech-Ward
Watch video Next-Level S3 File Management: The Ultimate Guide to Handling Files in Next.js 14 online without registration, duration hours minute second in high quality. This video was added by user Sam Meech-Ward 14 November 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 32,231 once and liked it 1.1 thousand people.