Next.Js 14 - AWS S3 Multiple Files Upload using Server Actions + Add-on

This is an add-on video where I will guide you through the process of changing our AWS S3 upload form to allow multiple files.
Original Video: • Next.Js 14 - AWS S3 Fi...
➡ Github: github.com/RaddyTheBrand/Next...
☕ BuyMeACoffee: www.buymeacoffee.com/RaddyThe...
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

[@ilan117]

Raddy ❤ you heard me, thank you so much ✌️ The array can be used to name the images e.g, appending userId as an example. I believe this could work anywhere in Vercel blob and supabase storage. Thank you again ❤

[@MsAlokranjan]

Wow Awesome Project 👌👌

[@RaddyDev]

😎👌

[@naylord5]

Thank you for such an useful tutorial! 🔥 Do you know if there is a limitation on how much files can we upload at the same time? Any amount of files or mb in total? or can I upload 100 images simultaneously without breake anything?

[@RaddyDev]

There is no hard limit as far as I know. Looking at their docs, if your file is fairly large (100mb >) you'll need to use multipart uploads which is basically splitting a single object as a set of parts. Amazon then assembles these pars and creates the object

[@naylord5]

@@RaddyDev Thank you very much 🙌

[@maxmurakami-moses4728]

Could you create a tutorial that uses pre-signed urls? Would be huge!

[@mlgen7]

Raddy, this is absolutely amazing. I used your code and it worked perfectly fine. The one issue I am getting is that everything falls apart when I convert this to TS. I get weird errors from S3. Cors errors start to appear and I am basically not able to use TS.

[@RaddyDev]

Interesting... I haven't tried it with TS and I don't see a reason why it would give you cors errors. Are you sure is not something else? I might have to try it at some point

[@NareshKumar-vt4sh]

For get?

[@melkhywong7594]

i was asking this in the previous video.. thanks for the help... now please do upload multiple images with server action + react hook form if you can. thanks.

[@RaddyDev]

Hey, no problem. With server actions you only have two options. The first one is to do it all inline as a server component and the second option is to do it as a client component and then you can split up your files, like I've done in this video. The other option you have is to create an API (like I did in my first S3 video) and then use a react hook like useState for example to update the UI. I think that kind of covers it all, unless I am missing something?

[@melkhywong7594]

@@RaddyDev i will give it a try. thanks!

[@RaddyDev]

[@prashlovessamosa]

hey buddy one video is hidden in the series when you are going to public it.

[@RaddyDev]

Which one is that? They should be all published

[@prashlovessamosa]

@@RaddyDev I am not able to share an image whenever I open up this playlist it shows a video is hidden i thought you have listed it not published it Stupid KZbin bug.