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

[@janpapaj4373]

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

[@Why-Ron75]

Sam? A potential subscriber here who really appreciates this video (and the exactly 1000th thumbed up viewer), but... Any response for this truly legit question from 3 months ago?

[@janpapaj4373]

@@Why-Ron75 yes i am also still waiting, decided to not do the project because cant get answer for my question here or anywhere

[@imransefat8770]

This was one of my concerns as well and had to use uploadthing

[@Why-Ron75]

@@imransefat8770 I appreciate this comment! Thank you 🖖🏽

[@janpapaj4373]

@@imransefat8770 thanks, how much did it cost you per user?

[@mohammedanas8637]

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.

[@borsaniasushant1]

Do you use next js with SST?

[@amardeep6088]

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

[@williamx0]

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

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

[@StephenRayner]

Nah man… public bucket. 6:06 and I’m out. You should have done pre-signed urls.

[@beans_dev]

This KZbin 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.

[@emmanueldjambatambashe701]

hi ! i am currently trying to setup the S3Client config but i am having this error Argument of type '[{ region: string; credentials: { accessKeyId: string; secretAccesskey: string; }; }]' is not assignable to parameter of type '[S3ClientConfig] | []'. can someone tell what should i do or where am i doing wrong

[@evocati44]

Can you PLEASE do a video where you upload a file along with a filled out form - store the file locally and retrieve the file as part of data retrieval for presentation. All done in Nextjs. I'm currently stuck in this for a work project. Thanks in advance

[@wchorski]

look for multer npm for this with the drag and drop npm library

[@evocati44]

@@wchorski OK but I'm doing this with TypeScript... I hope it's smooth 👀

[@omarzerhouni5498]

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 ?

Could You try this with DigitalOcean Spaces?

[@debadipti]

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

[@SamMeechWard]

Happy to help!

[@regilearn2138]

can you do it with lambda function

[@eclipse-224]

great video! thanks a lot

[@_abhaythakur3009]

❤

[@kamehameha38]

🔥

[@1felixxex1]

what do you recommend for tracking the progress of the upload to show the user a uploading 53%... etc. i ended up with doing the upload via xhr. what are your thoughts?

[@theizaananwar]

Why does uploading large files say like 160 MB, crashes my application and mainly next auth and I get JWT Session error and need to sign in again, and chery on top is my react query mutation is still running when all this os happening

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

[@victormustin2547]

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

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

[@santiagomanuelgonzalez9894]

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.

[@JohnWeland]

I wonder, for security reasons if you should lock down that bucket to not be public and instead generate TTL'd pre-signed URLs for the items in that bucket.

[@effekt.design]

Understanding S3 was a breeze with your video mate, Thanks for this content!

[@mike-2342]

Great video, very useful

[@inderjotsingh5868]

can you are a video about your website , where we are using mdx ? Website looks sick !! I want to implement same any pointers ? and does he have a discord ?

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

[@eduardaskuliesa8308]

Hey maybe can you share a repo where you implemented multiple file upload ?

[@true9536]

Yeah I'd also like to take a peek at that

[@jax152]

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?

[@designstudiohq7764]

❤❤❤

[@victorsaisse1340]

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

[@sunilmaurya6594]

Im doing the same process but I don't know why it is not generating presigned url, can anyone help me out here

[@jason.zubiate]

am i the only one that feels lost when trying to add this to my project lmao. all the docs examples on payload are way too complex and not real intuitive

[@carlesencinas1729]

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

[@vincentvargas9251]

Can you do in React with Amplify?

[@inderjotsingh5868]

wanna see multipart upload , and a loading percentage bar

[@romaind4853]

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

[@FacePlat3]

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

[@parladdgna]

how about multiple files at once?

[@jesusalfredopizanaespinosa1289]

Thanks for the video!

[@andresgutgon]

really nice ❤

[@brettwestwooddeveloper]

Great tutorial! Gained a sub from me. I am implementing this into my project and having trouble with it in production. In my localhost it is working fine. I did create a new bucket and IAM user for the production build and updated the env files in Vercel. I am getting 403 forbidden errors and errors about "An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details." Any help would be nice!

[@SamMeechWard]

It's hard to know exactly what's going wrong from that message. make sure you `console.error()` all your errors in your app, then check the vercel logs to see more detailed error logs

[@brettwestwooddeveloper]

@@SamMeechWard I fixed it by not having "-" as bucket name and added www. and just incase for my domain. Thanks again

[@hanslou5309]

I ran into the exact same problem. Looked at vercel logs and the actual error message is "Only plain objects, and a few built-ins, can be passed to Client Components from Server Components. Classes or null prototypes are not supported." The line that causes this is calling the getSignedUrl command from the @aws-sdk/s3-request-presigner library. Anyone know a fix for this?

[@Alex.Shalda]

so thorough! Thank you!

[@danielchukwu524]

U are goated. No cap

[@frankmungai1482]

Is there a way to block all public access and still make this work?

[@SamMeechWard]

Yes you can used signed urls. That process is in my other s3 video

[@7doors847]

GLAD YOU ARE BACK!!!!!! 🤘✌️

[@josephjoey3904]

How does one organise files in s3 like for example Userid (as folder name) Img1 Img 2 etc so the files are referenced in folders under the user's id

[@SamMeechWard]

There aren't really folders in s3 just file names. So you can name your file Key: `username/filename`, but it's not actually a folder. S3 will let you believe you've created a folder but all you've done is create a file name that starts with `usenrame/`. So visually this can look nice in s3, but it doesn't allow you to do any of the things you can do with folders. You won't be able to get all files from s3 inside a user's folder for example.

[@josephjoey3904]

@@SamMeechWard what of the bucket key/folder architecture. Someone suggested that to me. Is it a feasible approach?

[@SamMeechWard]

Yes it's a feasible approach, just prefex the object key with the `userid/` It looks like i was kind of wrong, you can get AWS to list files that start with a prefex, which is kind of like listing contents of a directory. just determine how you want to organize your files then when you name your files using the Key property, add a prefix to that. Something like this: const putObjectCommand = new PutObjectCommand({ Bucket: process.env.AWS_BUCKET_NAME!, Key: `${user.id}/${generateFileName()}` })

[@reubenporter9907]

@SamMeechWard is correct here, S3 is object storage not a file system. You can however structure your file names however you wish. e.g. user-1/image-1.jpg