Next.Js 14 - AWS S3 File Upload using Server Actions

In this video I will guide you thru the process of creating an AWS S3 Bucket and applying public permissions so that files are available to anyone of the internet.

In the second half of the video, I'll demonstrate creating a file upload form using NextJs and the official AWS S3 Client SDK. I will use one of the methods of creating and submitting forms using Server Actions.

Policy:
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::gearxplorer-prod/*"
}
]
}

Discounts:

Recording Equipment:

Computer Gear:

Connect with me:

Chapters:
◾ 0:00 Introduction:
◾ 0:24 S3 Bucket Setup
◾ 4:44 IAM Uuser Setup
◾ 8:05 Next.Js AWS S3 SDK + Server Actions
◾ 40:45 Sharp Image Optimization

#nextjs #aws #s3

[RaddyDev]

Hey everyone, I've come across a few S3 horror stories recently and wanted to share a word of caution. Please be mindful when using 'pay only for what you use' services, as bills can stack up quickly if something goes wrong. Regularly review your cost and usage reports and set up AWS Budgets for alerts.

[himanshuagarwal]

Brother i will cry after 3 hours of going insane i end up here and its all clear to me now and it worked. Thank you very much for this video.

[ElusiveProxy]

Very helpful, leaving this for the morning 17:14

[prashlovessamosa]

This series is quite helpful man thanks for sharing.

[naylord]

Master thank you for such a useful tutorial!
Please consider to add a follow up video with a CRUD operation on the images, and maybe a login to only show the user their images.
Thank you in advance!

[melkhywong]

what if i want to upload mutiple images in a single upload...

[muratasarslan]

instead of creating a new file for the submit button, can we just make form.js use client & handle button submitting status there?

[gabrielbigliardi]

Helped me a lot!
Could you do the DELETE route?

[maxmurakami-moses]

Could you do a tutorial with pre-signed url's for security cases?

[Toulkun]

When i upload image i get file format not accepted even though its in png format, is there any additional logic for form that need to be made or something on AWS?

[Tommy-evgv]

You a small note. When working with React and returning HTML elements don't use the file extension .js instead use .jsx

[hamza_jazayri]

thank you for such a useful tutorial!
Please can you make a video about Creating a Custom e-commerce WordPress Block Theme

[RafaelDurelli]

How secure is the AWS access key and the AWS secret key using env? Thanks in advance.

[shyiramberegilbert]

bro thank you so much for the content.
but i face a problem of being unable to upload image on s3. everything was ok until to there. i think ContentType is the issue but unabale to figure out the problem.

[NikhilAnandGampala]

Hello can you do an videos on aws lambda, dynamodb, cognito with next js

[ilan]

Raddy ❤ could you please show us how to upload multi images ? Would it be very hard ? All the tutorials shows only one image upload. I would very much appreciate it 🙏