Next-Level S3 File Management: The Ultimate Guide to Handling Files in Next.js 14

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.

Join this channel to help me make more videos and get access to some videos early:

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

[victorsaisse]

you have no idea how much you saved my life with every s3 video, you have the best content out there!

[donenv]

s3 guy is back lol, learnt uploads with your other video like a year ago, havent viewed this yet but cannt wait to check it out.

[beans_dev]

This YouTube channel is gold, I recently saw the playlist where you explaining tests and mocking an express and and mocking a database. Your videos are gold man. One day I’m going to reach this point. You gained a subscriber in me.

[FacePlat]

This video is very useful for my project thanks for sharing this! Also, love how detailed the steps are in your website.

[debadipti]

Perfect timing! I was looking for a robust way to do exactly this. Thank you Sam!

[janpapaj]

What's stopping a malicious user from sending a gazzilion requests to the image hosted on s3 and billing you a billion dollars?

[romaind]

Very very useful tutorial. I needed that for my project ! Thanks a lot !

[amardeep]

Wooo it was fantastic, learned a lot of things, thank you very much

[williamx]

Thanks for the video! Because you’re the s3 guy and have made a lot of videos about it, I think it’d be nice to make an extension video incorporating some of the stuff uploadingthing does and looking at their open source code and showing us how to implement some of the functionality they provide (whatever it is). Afaik, avoiding potential issues where users request a url but don’t upload or something goes wrong and there are a lot of ghost entries in the database or whatnot. I haven’t looked into it myself yet but it’s something I would want to do and a youtube video would be helpful I think to see how uploadthing does it and what problems they solve as an extension to this video. It’s kind of like the video that joshTriesCoding did, but with more code and implementing some of it on our own

[carlesencinas]

Very useful video, thank you so much!!! :)

[thedelanyo]

22:29

Awesome. Thanks

with the file type check, you might as well do if type.includes("image") || type.includes("video"), which is kind of succinct.

Could You try this with DigitalOcean Spaces?

[santiagomanuelgonzalez]

Hello friend, thank you for the video, the explanation is very clear! I am implementing the DALL-E 3 API and I want to save the image in a bucket, but I'm not sure whether to do it from the client or directly from the server. Do you think it's too costly to do it from the server using my server function or edge function? The images are around 2 megabytes in size.

[dejoma.]

Nice video and content! I am also working on a NextJS frontend with a Python backend (NextJS wasn't doing it anymore for me, too much other processes like data parsing had to be done). I don't want to manipulate the DB from NextJS anymore (I mean I do allow for API calls that then in Python will do DB work). What would you recommend here?

[omarzerhouni]

Hi Sam,
Do you have a video or a course where you show how to set Private buckets and how to use them with NextJS ?

[adriano-josue]

Excellent tutorial, Sam. How can I integrate sharp with your implementation? I've been trying, but I can't because the file is being uploaded from the client side.

[mohammedanas]

I personally use SST for this, it takes a few extra steps but mostly it works if you full in wanna deploy things with AWS. But it simplifies things.

[jax]

How did you autocomplete those several lines of code at a time when calling a function or making an object? Is it an extension or a setting?

[victormustin]

Hey, if the image was AI generated and fetched from an API, I guess you’d have to upload it from the server directly to s3. Do you know any ressource on how to do that with next js ? All ressources I could find only cover the client-to-s3 situation

[euanmorgann]

Would love to see an expansion of this that goes into multiple files at once and editing a post to swap out images etc.
I implemented this recently and feel like there must be a nicer way to do it than I did.