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!

@ethan_mick

9 ай бұрын

Heck ya. Gotta get straight to the good stuff.

You have no idea how helpful this was!!!! Thank you!

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.

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.

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

@saputrauta09

6 ай бұрын

thanks

Just what I was looking for - upload functionality without the need for any additional (probably costly) third party services. Thanks a million!

Thanks so much, I was looking for my solution for a day and this helped me get it! Much love

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.

Worked like a charm! Thank you

And Ethan saves the day again. Thanks for the videos

Thanks!!! I've been looking for this!

Your explanation delivery is awesome!

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!

Nice tutorial, it really help and also big props for going with vanilla option.

It was really awesome. You made it short and crisp

Thank you it really helped me, I was struggling with this problem the whole day :)

This is amazing bro, love your lesson ❤❤

Amazing tutorial, needed this part for my next :) project

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

Thank you very much! I was looking for a solution like this!

Thanks a lot for this. This is the only resource I found about this two sides of the topic in the web.

This is exactly what I'm looking for, thank you so much! 🙂

@ethan_mick

10 ай бұрын

Glad it was helpful!

Love this one bro, super helpful!

@ethan_mick

11 ай бұрын

Thanks so much!

This is really clear and easy to follow. Thank you :)

@ethan_mick

10 ай бұрын

You're very welcome!

Your video topics are always so relevant!

@ethan_mick

11 ай бұрын

❤️❤️

You're a wizard, I've been looking everywhere for a solution like this

@ethan_mick

10 ай бұрын

Thank you! May the magic continue

thank you!! This helped so much

You're the best bro.... Thanks for you job!

Thank you so much. Both the video and blog post were very useful.

@ethan_mick

9 ай бұрын

Glad it helped! And thanks for the blog mention :D

Thank you Thank you. Finally someone explained it.

as usual very helpful, thank you

@ethan_mick

11 ай бұрын

Glad to hear that! Thanks!

You are a good man. Am suscribing right away

Thanks for the great video. Worked like a charm.

@ethan_mick

8 ай бұрын

Glad it helped!

Just wanted to commend you on excellent content, choices and explanations!

@ethan_mick

11 ай бұрын

Thank you so much!

Thanks, man you are a lifesaver. This video helps me a lot

@ethan_mick

11 ай бұрын

Glad to hear that!

thanks, you saved me lot of time

awesome content 🔥

this video is life saver i have been struggling with this video file upload in s3 .Thanks a lot

@ethan_mick

9 ай бұрын

Glad to hear that!

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

@ethan_mick

9 ай бұрын

You're very welcome! Glad it was simple and easy :)

thank you, man!

insanely well done video!

@ethan_mick

9 ай бұрын

Thank you so much!

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.

@andrewaj8417

5 ай бұрын

Any tutorials or links how to do it production ready properly? Thank you

@user-wr7ou8ih5s

5 ай бұрын

But what if i don't wanna do it the old way , can i ?

@dwolrdcojp

5 ай бұрын

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

@dwolrdcojp

5 ай бұрын

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

@user-wr7ou8ih5s

5 ай бұрын

@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

great content :)

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

Amazing work and very well explanation

@ethan_mick

11 ай бұрын

Thank you! Cheers!

😮 this is sooooo helpful man thanks 🙏

@ethan_mick

11 ай бұрын

Any time! As always, thanks for your support!

Thank you very Much.

This is what I've been looking last 3 days! Thank you a lot!

@ethan_mick

11 ай бұрын

Enjoy and you're welcome! Cheers!

@drums_in_my_head

11 ай бұрын

@@ethan_mick unfortunately seems like it doesn't work when I deploy my project in Vercel. Does your project work there?

@ethan_mick

11 ай бұрын

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

@toyinatofarati5512

10 ай бұрын

I tried it it mongodb but it didn't work any way out?@@ethan_mick

Great guidance. Kudos!

@ethan_mick

11 ай бұрын

Glad it was helpful!

great! you solved my problem. thank you

@ethan_mick

10 ай бұрын

Heck ya, glad I could help!

Thank you soooo much

Just awesome. You have done a great job.

@ethan_mick

9 ай бұрын

Thank you so much 😀

@bestchoice7431

9 ай бұрын

@@ethan_mick I am stuck on the Vercel blob. Can you please make a video of the CRUD operation with Vercel blob?

Thanks, Man, This video helps me 💯

@ethan_mick

10 ай бұрын

Glad to hear it!

You are a live saver

Bro...... You have no idea how appreciative I am. All the other tutorials about NextJS file uploading are using third party libraries but you.

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.

@ethan_mick

9 ай бұрын

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!

Thank you!

thank you ethan

Awesome man you're awesome

@ethan_mick

9 ай бұрын

Thanks :D

Thanks!!!!!

Funny how i needed this in a project i am working on and it presented itself. Ctrl+C & Crtl+V lets go

@ethan_mick

11 ай бұрын

Let's goooo!

Thanks bro

Really great video. Thanks! Would you please tell me how to upload multiple files?

After using this method to upload image, when we go to host website on versal then it give error

thank you💗💗💗💗💗💗💗💗

You don't know how much you've saved me😭 Thank you💌

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

6:40 this part saved my project

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

Two words, Thank you.

@ethan_mick

8 ай бұрын

My pleasure :)

Thank you.

@ethan_mick

10 ай бұрын

You're welcome!

It has a limit of uploading 1mb file only. How to resolve connection reset error for large file in case of api route? Thanks,

Sir, Does it work after the production build???

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

Great! Thank you! It helped alot. Would you please also explain how to display file when select on the client side before uploading?

@ethan_mick

10 ай бұрын

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.

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?

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?

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 ?

And in Next Js 14? The Next JS 14, the "NextApiRequest" type does not have formData property..., so how do i do?

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)

@ethan_mick

10 ай бұрын

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.

Can this be done with server actions?

Literalmente copié todo el código tal cual en mi proyecto y nada. Me da un error TypeError: s is not a function. Nada, para mí es imposible ya...

Thanks bro :>

@ethan_mick

10 ай бұрын

💪

How to handle dynamic directories? getting error when the directory does not exist and need to create a new one

great video, I can upload, but I have an e-commerce, how do I serve the images with the products?

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

@ethan_mick

10 ай бұрын

Yes, correct! Instead of saving it as a file, use the Azure Library to upload the buffer to Azure.

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

@ethan_mick

10 ай бұрын

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 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

@ethan_mick

10 ай бұрын

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.

While trying to upload the file, API throws 413 -large metadata, also the app is deployed on Vercel.

This was very useful, but is there any way to delete a file without using NextJs libraries?

obrigado gringão! vc é o cara

very good

@ethan_mick

9 ай бұрын

Thank you! Cheers!

This doesn't work with pages routing. formData is not a function. Anyone found a solution to that?

Hey bro can u pleas show us on how to upload files from nextjs to aws s 3 bucket

@ethan_mick

10 ай бұрын

Heck ya I can

You save a file outside the Nextjs folder, How can Nextjs read it?

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

When you say file , do you mean video and image and pdf and every file , or just a image

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

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.

@Ta9i

3 ай бұрын

so did you find a fix for this probleme