File Upload in Next.js 13 App Directory with NO libraries! Client and React Server Components!
Vložit
- čas přidán 5. 07. 2024
- Easily upload files and then use them server-side in Next.js 13! In the past, you would need to use third-party libraries to help with this, but NO MORE. See how you can upload files easily in client and server components.
📰 Newsletter 📰
Signup for my newsletter, "A Bit of SaaS," to keep you informed, inspired, and engaged with the latest trends, tips, and resources in the ever-evolving SaaS industry.
ethanmick.com/newsletter/
📜 Code 📜
• ethanmick.com/how-to-upload-a...
👨🏼💻 About Me 👨🏼💻
I am a principal software engineer and architect who loves building cool cloud software.
• Website: ethanmick.com/
• GitHub: github.com/ethanmick
• Twitter: / ethan_mick
• LinkedIn: / ethan-mick
• Agency: ethanmick.dev/
🔖 Chapters 🔖
00:00 - Intro
00:49 - Client Component
08:24 - React Server Component
11:23 - Outro - Věda a technologie
You are a life-saver. This is probably one of the very few channels that actually jumps in the raw coding part without any fancy library that most people don't care about. Thank you for the valuable informations!
Heck ya. Gotta get straight to the good stuff.
You are a lifesaver man, I am trying next.js after react and react-native, I am not sure how to transition, you clearly gave me a path for me to follow. Thank you so much, you got a loyal subscriber here.
Bro this saved my life in so many ways i can't thank you enough. I've been searching whole internert (in 3 languages) just to find out how i can save a file in nextjs api with app router and only this video worked for me.
Just what I was looking for - upload functionality without the need for any additional (probably costly) third party services. Thanks a million!
Stunning, simple, short and to the point tutorial, i appreciate your approach towards being able to implement this functionality without adding more dependencies to the code. Bravo
You're the best! We need more useful tutorials like this one. I guess most folks are just using libraries and demonstrating how to use them in their videos, but you did something really unique by showing a native approach that actually works. I'm truly thankful to you.
Really helpful tutorial, after so much time spent on how to upload image in nextjs,I found this and it works so well...thanks a lot!
You have no idea how helpful this was!!!! Thank you!
Your explanation delivery is awesome!
Many thanks for all the same reasons shared by previous commenters. Tutors that focus on the basics for noob programmers have a special place in our hearts
Thanks so much, I was looking for my solution for a day and this helped me get it! Much love
Nice tutorial, it really help and also big props for going with vanilla option.
Thank you for this tutorial Ethan.
if someone is interested how to write file in to some folder inside the project
const rootDir = process.cwd();
const path = join(rootDir, 'public', 'storage', file.name);
it is going to put the uploaded file to project/public/storage/file.extension
thanks
You're a wizard, I've been looking everywhere for a solution like this
Thank you! May the magic continue
It was really awesome. You made it short and crisp
And Ethan saves the day again. Thanks for the videos
Your video topics are always so relevant!
❤️❤️
Thanks a lot for this. This is the only resource I found about this two sides of the topic in the web.
Amazing tutorial, needed this part for my next :) project
This is really clear and easy to follow. Thank you :)
You're very welcome!
this is amazing , i was struggling to find a source to learn this, , all i could find is usless libraries or old articles, your method is the easiest and most efficient, thank you very much
You're very welcome! Glad it was simple and easy :)
You're a lifesaver. Unlike many other resources that dwell on unnecessary libraries, this channel dives straight into the essential coding aspects. Thanks for providing valuable information. Love from Pakistan
Just wanted to commend you on excellent content, choices and explanations!
Thank you so much!
This is amazing bro, love your lesson ❤❤
Thanks!!! I've been looking for this!
This is exactly what I'm looking for, thank you so much! 🙂
Glad it was helpful!
Love this one bro, super helpful!
Thanks so much!
Thank you it really helped me, I was struggling with this problem the whole day :)
Worked like a charm! Thank you
Thank you so much. Both the video and blog post were very useful.
Glad it helped! And thanks for the blog mention :D
Bro...... You have no idea how appreciative I am.
All the other tutorials about NextJS file uploading are using third party libraries but you.
this video is life saver i have been struggling with this video file upload in s3 .Thanks a lot
Glad to hear that!
Thank you very much! I was looking for a solution like this!
You are a good man. Am suscribing right away
Thanks for the great video. Worked like a charm.
Glad it helped!
This is what I've been looking last 3 days! Thank you a lot!
Enjoy and you're welcome! Cheers!
@@ethan_mick unfortunately seems like it doesn't work when I deploy my project in Vercel. Does your project work there?
@@drums_in_my_head Hey, sorry, friend! This won't work on Vercel because Vercel's API route handlers are lamda functions with no permanent access to the filesystem. If you want to upload a file, you'll need to follow this guide *and then* send it to a blob file storage like AWS S3 or whatnot. This can get the contents of the file from the user. So you could do:
const key = `${randomUUID()}${randomUUID()}`.replace(/-/g, '')
const s3 = new AWS.S3()
const params = {
Bucket: bucket,
Key: key,
Body: buffer,
}
await s3.upload(params).promise()
Where `buffer` is what you get from the request.
I tried it it mongodb but it didn't work any way out?@@ethan_mick
You're the best bro.... Thanks for you job!
Thanks, man you are a lifesaver. This video helps me a lot
Glad to hear that!
I think it should be mentioned that this is not a final solution for a production build if you're hosting on something like Vercel. You would need to use storage bucket solution like Vercel blob, supabase bucket, AWS, etc. Vercel will not let you write to their server because most of the time its trying to run these calls as serverless and there is no where to store it. Vercel offers a tmp directory where you could upload the file to with the serveless function but you have to immediately take it from the tmp directory and send it off to your storage bucket solution.
Any tutorials or links how to do it production ready properly?
Thank you
But what if i don't wanna do it the old way , can i ?
@@andrewaj8417 I would just look at vercel blob or supabase storage bucket docs... you can call their API and easily pass your files for upload
@@user-wr7ou8ih5s Not sure what you mean by this? Maybe if your Next.js was self hosted on another host that supports directly writing to the same server your project is built and ran from. Vercel explicitly tells you that you cannot write files to their server. Not so much because a storage issue for them but the way they optimize for serverless
@dwolrdcojp i mean that im building a project for a company, and they don't wanna use external solutions like cloudinary or firebase to store images , so the only thing left for me is to save them as a long string in my db or inside the project folder 📂🤔 !and then i read your comment
Thank you man.
I like that its the cleanest and simplest solution.
I tryed to do the same with formidable and other libarys, but i alsways got stuck, because of bugs with next js and blobs.
I wasted probably 2 days on that.
Yeah, using libraries can be necessary for some of the more complex use cases, but this is the simplest way by far. And it should get you pretty far!
Just awesome. You have done a great job.
Thank you so much 😀
@@ethan_mick I am stuck on the Vercel blob. Can you please make a video of the CRUD operation with Vercel blob?
insanely well done video!
Thank you so much!
as usual very helpful, thank you
Glad to hear that! Thanks!
Thank you Thank you. Finally someone explained it.
Amazing work and very well explanation
Thank you! Cheers!
thank you!! This helped so much
Great guidance. Kudos!
Glad it was helpful!
thanks, you saved me lot of time
😮 this is sooooo helpful man thanks 🙏
Any time! As always, thanks for your support!
awesome content 🔥
great! you solved my problem. thank you
Heck ya, glad I could help!
Funny how i needed this in a project i am working on and it presented itself. Ctrl+C & Crtl+V lets go
Let's goooo!
Thanks, Man, This video helps me 💯
Glad to hear it!
thank you, man!
You don't know how much you've saved me😭 Thank you💌
Great! Thank you! It helped alot. Would you please also explain how to display file when select on the client side before uploading?
Thanks! I can make a vid about this, but in short you'd use the File Reader API (developer.mozilla.org/en-US/docs/Web/API/FileReader) to read the contents of the file once the user has selected it, turn it into a blob, and display that as an IMG tag.
Thank you for your amazing video 🔥🔥🔥 I have a question : how to upload a file using nextjs structure /pages/api/upload.js into Laravel endpoint
Thank you very Much.
great content :)
You are a live saver
This works pretty much only to app/api route approach and the API handler name needs to be POST() to avoid "Request.formData is not a function" error. The old page/api won't work (could be a bug, but Next JS documentation doesn't say)
Yeah, this is in the App directory only. Since that's the new default and recommended approach I only covered it instead of the pages directory.
Really great video. Thanks! Would you please tell me how to upload multiple files?
Thank you soooo much
OMG thanks a lot! This video saved me. All previous tutorials I found used more complex methods and additional packages, and I really don't want to add more dependencies to my project ^^'
Just a question. Does this work the same way for multiple files? I guess the type would be instead
Yep, you've got it! When reading in the form data it'll be `File[]` and then you can iterate over the array of files.
Thank you!
Nice video ethan. This video is super informative. I tried to kick it up a notch by trying to add text to the inage using the same logic, but it doesn't work, any tips on how to do that. Thanks in advance
thank you ethan
Awesome man
you're awesome
Thanks :D
Hi, thanks for your great explanation, i follow the session till the end , i want save the uploaded file in Azure blob storage, so for POST function i need to override the node fs and replace it with blob component? just asking how can i approach it. thank you
Yes, correct! Instead of saving it as a file, use the Azure Library to upload the buffer to Azure.
i wish you can do a tutorial on javascript too since im using javascript instead of ts while building T_T is a hell for me doing file upload for local. But above video is great using TS. i think i should get to TS learning
Hii, How do you specify File size-limit to an api enpoint in Nextjs 13.5, I am getting "413 Payload too large" for pdfs which are 3 MB but at the same time images are getting uploaded of same size
Using this method is good if we uploading from front-end, but it has a problem when we want to test from postman, we cannot use form-data type file because in the backend only accept string type (buffer of the image). Is there any alternative so we can send the file to the backend without create buffer first?
Thanks bro
Thanks!!!!!
Two words, Thank you.
My pleasure :)
6:40 this part saved my project
thank you💗💗💗💗💗💗💗💗
great video, I can upload, but I have an e-commerce, how do I serve the images with the products?
This is a great tutorial that hasn't been on CZcams before. The only problem I encountered is that Next.js doesn't recognize files added after the initial build. In other words, in a production environment, you need to rebuild your app after adding a new file to display it. In my case, I tested this with PDF files, and initially, it showed a 404 error. However, after rebuilding, it displayed as expected.
The way we solve it on our projects is by creating an apache vhost on our server that points to the uploads directory in Nextjs. After that you make it public and update the URL for all your uploaded files (for example from: "/uploads/file.pdf" to "example.com/uploads/file.pdf"). Works like a charm so far!
@@minathealip431 im currently stuck with this part of the images dont work after the build, can please further explain how u anaged to fix this, Any help would be greatly appreciated!
@@Ta9i Sure! If you are hosting it on your own VPS, it's going to be easy :) You can setup apache or nginx (or whatever web server you are using), to point to the public or upload directory of your app. In apache it would be setting up the DocumentRoot to the public folder :)
And in Next Js 14?
The Next JS 14, the "NextApiRequest" type does not have formData property..., so how do i do?
It has a limit of uploading 1mb file only. How to resolve connection reset error for large file in case of api route?
Thanks,
Thank you.
You're welcome!
Sir, Does it work after the production build???
Thank you for your great work , I am trying to do your solution in JS not TS but this line was error const data = await request.formData()
request.formData() is not a function . if you know why please help me
Make sure you’re on the latest version of Next.js and that this is in the app dir, the pages directory handles this differently.
I tried this just for testing no 3rd party or any thing but I send that buffer as a response and tried to pass it to the Next it worked but I tried sending larger image like more then 1mb why tag does not render it, is it to heavy ?
i did something similiar to what you did. that was great in development phase but in production mode, the newly uploaded image cannot be found by next js. any help my man?
Thank you! npm run start cannot read the image or video in public folder. Is it possible to store and dynamically read the file? the path is saved to database. I need to restart the run to able to read the image.
so did you find a fix for this probleme
Thanks bro :>
💪
After using this method to upload image, when we go to host website on versal then it give error
very good
Thank you! Cheers!
This was very useful, but is there any way to delete a file without using NextJs libraries?
obrigado gringão! vc é o cara
Which vscode theme and font?? And will there be any more live sessions??
It's actually just the default theme and font! Nothing special, but it is zoomed in like a billion percent. And yes, more live sessions will be happening, I just need to consider what we should code next!
found whole internet but not getting solution of this | is there any alternative of this method : (node:23124) ExperimentalWarning: buffer.File is an experimental feature and might change at any time
Can this be done with server actions?
Hey bro can u pleas show us on how to upload files from nextjs to aws s 3 bucket
Heck ya I can
While trying to upload the file, API throws 413 -large metadata, also the app is deployed on Vercel.
You save a file outside the Nextjs folder, How can Nextjs read it?
How to handle dynamic directories? getting error when the directory does not exist and need to create a new one
When you say file , do you mean video and image and pdf and every file , or just a image