File Upload in Next.js 13 App Directory with NO libraries! Client and React 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.

📜 Code 📜

👨🏼‍💻 About Me 👨🏼‍💻
I am a principal software engineer and architect who loves building cool cloud software.

🔖 Chapters 🔖
00:00 - Intro
00:49 - Client Component
08:24 - React Server Component
11:23 - Outro

[u.chaudhry]

This dude solved my problem I had for two weeks. He deserves way much more subscribers

[alaricbell]

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!

[miralirafiyev]

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

[SheriffKoder]

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

[michaelmaher]

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.

[samontefrankamirsong.]

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.

[mohammadbagheri]

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.

[DorianDevelops]

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

[kevn_eleven]

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

[harmony]

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

[traezeeofor]

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

[CaseStudyQB]

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

[dwolrdcojp]

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.

[yongjiang]

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!

[cassioscabral]

And Ethan saves the day again. Thanks for the videos

[Androb]

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

[alejandroz]

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

[wealthwiseNav]

It was really awesome. You made it short and crisp

[manjarcode]

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

[FutureNewsDaily]

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