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

Рет қаралды 5,575

7 ай бұрын

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/NextJs-14-S3-Server-Actions-Upload
☕ BuyMeACoffee: www.buymeacoffee.com/RaddyTheBrand
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=408&aff_id=69300
⚡ Elementor: be.elementor.com/visit/?bta=26518&brand=elementor
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

Пікірлер: 39

@RaddyDev 7 ай бұрын

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.

@prashlovessamosa 6 ай бұрын

This series is quite helpful man thanks for sharing.

@RaddyDev 6 ай бұрын

Glad to hear that, thank you

@himanshuagarwal7925 2 ай бұрын

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 2 ай бұрын

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

@patrickt4279 3 ай бұрын

Subscribed. Great stuff.

@naylord5 7 ай бұрын

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 5 ай бұрын

THANK YOU! It works fine

@heal8379 9 күн бұрын

Thanks mate

@gabrielbigliardi 6 ай бұрын

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

@JuanMoisesTorrijos Ай бұрын

¡Gracias!

@RaddyDev Ай бұрын

oh wow, that is super kind of you! Thank you so much

@maxmurakami-moses4728 2 ай бұрын

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

@hamza_jazayri 7 ай бұрын

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

@RaddyDev 7 ай бұрын

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

@hamza_jazayri 6 ай бұрын

@@RaddyDev thanks sir

@melkhywong7594 6 ай бұрын

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

@RaddyDev 6 ай бұрын

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

@Toulkun 2 ай бұрын

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 2 ай бұрын

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 2 ай бұрын

@@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 2 ай бұрын

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 7 ай бұрын

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 7 ай бұрын

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

@RafaelDurelli 6 ай бұрын

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

@RaddyDev 6 ай бұрын

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 3 ай бұрын

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

@lucidelabssite 2 ай бұрын

How do I get the url back from s3?

@RaddyDev 2 ай бұрын

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

@NikhilAnandGampala 4 ай бұрын

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

@RaddyDev 4 ай бұрын

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

@ilan117 6 ай бұрын

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 6 ай бұрын

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 6 ай бұрын

@@RaddyDev ✌️😍

@RaddyDev 5 ай бұрын

Multiple images: kzfaq.info/get/bejne/g6ugpphzkpOXfGQ.html