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.
➡ Github: github.com/RaddyTheBrand/Next...
☕ BuyMeACoffee: www.buymeacoffee.com/RaddyThe...
Policy:
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::gearxplorer-prod/*"
}
]
}
Discounts:
⚡ Hostinger: www.hostg.xyz/aff_c?offer_id=...
⚡ Elementor: be.elementor.com/visit/?bta=2...
Recording Equipment:
◾ Microphone: amzn.to/3uX0yvP
◾ Shotgun Mic: amzn.to/3aRsSJb
◾ Camera: amzn.to/3IMumkx
◾ Lens: amzn.to/3ARxvh8
◾ Lighting: amzn.to/3PBetj2
Computer Gear:
◾ Keyboard: amzn.to/3RCXRcC
◾ Headphones: amzn.to/3aIvskX
◾ Mouse: amzn.to/3VfVuxO
Connect with me:
◾ Website: www.raddy.dev
◾ Newsletter: www.raddy.co.uk/newsletter
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]

This video is almost identical to the first one where I used an API route. I used the Client Components approach to do the Server Actions. Enjoy

[@prashlovessamosa]

This series is quite helpful man thanks for sharing.

[@RaddyDev]

Glad to hear that, thank you

[@himanshuagarwal7925]

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.

[@RaddyDev]

You are most welcome brother. I am glad that you found the video helpful

[@naylord5]

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!

[@leandromartins6935]

THANK YOU! It works fine

[@patrickt4279]

Subscribed. Great stuff.

[@gabrielbigliardi]

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

[@maxmurakami-moses4728]

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

[@hamza_jazayri]

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

[@RaddyDev]

I need to get back on to making WP stuff. Did you check out the last Woo Block Theme that I made: kzbin.info/www/bejne/d328qYN3n7mXoM0

[@hamza_jazayri]

@@RaddyDev thanks sir

[@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?

[@RaddyDev]

No additional logic is required. Do you have accept="images/*" on your file input? I wonder if it's something to do with "sharp". Can you take the sharp image optimisation off and try to upload another image

[@Toulkun]

@@RaddyDev I fixed it, i had to use formData for some reason to get actual file i think and i used ArrayBuffer. Seems like buffer is needed to read file properly for image to be recognized. I might be wrong.

[@Toulkun]

So FormData that is used is because for POST method to process the file correctly it isnt like other types where you typically can use Json or other convertors. Array buffer is needed for S3 because it accepts content in format that can be used in its Body of upload request.

[@shyiramberegilbert145]

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.

[@RaddyDev]

Did you manage to figure it out? You could reference the code on Github. I'll be happy to help if you haven't figured it out yet

[@melkhywong7594]

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

[@RaddyDev]

Yeah you can do that. I don't have an example, maybe you could use ChatGPT to help you figure it out. It shouldn't bee too much work to do

[@NikhilAnandGampala]

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

[@RaddyDev]

I haven't used any of the services that you mentioned, but I am open to exploring them. I've been avoiding pay-as you go services as it could be dangerous. Used SST a few times (which uses lambda), but quickly reverted back to VPS

[@RafaelDurelli]

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

[@RaddyDev]

You have to be careful for sure. They are keys after all and you don't want them to end up in the wrong hand. There are couple of things that you can do, such as having minimum required permissions, rotate credentials, set up alerts, maybe lock them down to specific IP (if that's possible) and so on. There might be a security check list online that you can follow. Basically, don't leak them and you will be fine.

[@coreydevs]

Dont use the NEXT_ prefix as this will expose to the client. Remove this and you should be fine.

[@karthiclokesh7738]

How do I get the url back from s3?

[@RaddyDev]

You should already have the Bucket URL and the file name can be stored somewhere on upload. This way you can put them together whenever required. Example: mybucket dot com/myfile

[@Tommy-ev6gv]

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

[@RaddyDev]

Thank you

[@ilan117]

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 🙏

[@RaddyDev]

I don't think that it would be hard to convert to multi upload. Let me look into it and I will see what I can do

[@ilan117]

@@RaddyDev ✌️😍

[@RaddyDev]

Multiple images: kzbin.info/www/bejne/g3bTpGh4YpJmgpI