Next-Level S3 File Management: The Ultimate Guide to Handling Files in Next.js 14
Vložit
- čas přidán 5. 07. 2024
- 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.
This is a complete tutorial on how to use S3 to Get, Put, and Delete files in your Next.js 14 applications. I'll show you how to make this work with images and videos, but these techniques will work with any file type.
Code and references: www.nexttonone.lol/upload-s3
Join this channel to help me make more videos and get access to some videos early:
/ @sammeechward
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
My Website: www.sammeechward.com
Instagram: / meech_ward
Twitter: / meech_ward
Github: github.com/orgs/Sam-Meech-Ward - Věda a technologie
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.
This video is very useful for my project thanks for sharing this! Also, love how detailed the steps are in your website.
This CZcams 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.
Perfect timing! I was looking for a robust way to do exactly this. Thank you Sam!
Happy to help!
Very very useful tutorial. I needed that for my project ! Thanks a lot !
GLAD YOU ARE BACK!!!!!!
🤘✌️
Wooo it was fantastic, learned a lot of things, thank you very much
so thorough! Thank you!
Great video, very useful
Very useful video, thank you so much!!! :)
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
Thanks for the video!
really nice ❤
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.
U are goated. No cap
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.
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.
Do you use next js with SST?
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?
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.
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.
Hey maybe can you share a repo where you implemented multiple file upload ?
Yeah I'd also like to take a peek at that
Could You try this with DigitalOcean Spaces?
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?
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
🔥
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?
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 ?
What's stopping a malicious user from sending a gazzilion requests to the image hosted on s3 and billing you a billion dollars?
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
look for multer npm for this with the drag and drop npm library
@@wchorski OK but I'm doing this with TypeScript... I hope it's smooth 👀
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.
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
❤❤❤
❤
Can you do in React with Amplify?
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
thoughts on uploadthing?
Im doing the same process but I don't know why it is not generating presigned url, can anyone help me out here
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
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.
@@SamMeechWard what of the bucket key/folder architecture. Someone suggested that to me. Is it a feasible approach?
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()}`
})
@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
wanna see multipart upload , and a loading percentage bar
can you do it with lambda function
Is there a way to block all public access and still make this work?
Yes you can used signed urls. That process is in my other s3 video
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!
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
@@SamMeechWard I fixed it by not having "-" as bucket name and added www. and just incase for my domain. Thanks again
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?
how about multiple files at once?
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
Nah man… public bucket. 6:06 and I’m out. You should have done pre-signed urls.