Uploading files in NextJs 13 using Server Actions

In this video we'll look at handling file uploads using server actions in NextJs 13, we're going to use signed upload in Cloudinary as our cloud storage and React dropzone to allow drag an drop.

👉🏼 The Ultimate NextJs Course

👉🏼 Source code (Github)

Chapters
0:00 Intro
1:50 Project setup
3:00 Setting up dropzone
6:20 Adding server actions
17:12 Outro

[mobinans]

Thank you for this video, I'm so glad I stumbled upon this video! I've been searching all over for something like this. It's like you read my mind! The content is spot on and exactly what I needed. I appreciate the effort you put into creating this video. Keep up the fantastic work! Thanks once again.

[AlirezaMehrabiKali]

Hi Mr Bahram,
I want to say I'm thankful and appreciate you, i always watch your videos. i follow you on linkedIn and youtube and follow your tutorials from Iran.

[uixmat]

Just watched this through and it looks exactly like what i need to implement as a next step in my app. Looking forward to giving it a go!

[LeonardoRossi-crfe]

Thank you for a making great videos, Hamed. A huge from Brazil

[lonelyboy]

you deserve way more subscribers !! Thank you so much!

[erkintek]

you should name this as "Uploading files to Cloudinary in NextJs 13".

[ThugLifeModafocah]

Nice touch about the signature. Thank you. What kind of account you created on cloudinary (there are the programmable media and digital asset management)?

[AndrulisTravel]

great content as always. Maybe you can make tutorial on how to upload multiple images with drag and drop functionality to Cloudflare image service. The service uses CDN, it's also has very friendly pricing compared to Cloudinary. Basically a form to submit a listing of some product with images and also using server actions :)

[abbaskareem]

I like your way of teaching... You make hard topic easy to understand thank you very much sir .. One question please, If I have a backend endpoint (let say in django-rest-framework) which eccept formData I only need to make a post request to that endpoint no need to make sigture and all that staff ?

[caturbgs]

I have an issue where data doesn't get sent to the backend API when uploading a file that is larger than 5 MB.

[oluwafemifaleye]

Thank you for this interesting video❤, I have been waiting for it.

What if I want to send the form data to an API route then handle the upload using multer or formidable. I have tried it countless time, but it seems not to work with the app router version. Maybe the multer library needs an update that will support the API routes in Next 13.4. Kindly tell me if I am wrong.

Thank you

[INteresting_]

you're a legend for not using typescript bro 😎

[sirpripyat]

Thanks for the video, Hamed! Do u have some solution about fetching the url images from backend and showing them in front?

[liu-river]

This is super helpful. I have a question, so to upload multiple images, I tried to attach multiple files to the same form but that didn't work. It only works if I attach one photo at a time and post to the api. So to upload 3 photos, it would be 3 seperate calls to the api, ofc I can loop this, but is this the only way when using signed method?

[wakibtz]

Hi/ I have a problem. I when i use actions in client component i get an error that i can not use (use server) in client component. But i make all like you

[musayazlk]

Hello. I don't want to use a 3rd party storage service like Cloudinary for images and videos. I keep video and image files under public with Multer, but in this case, images and videos uploaded later in production environment don't work. I want to keep the uploaded videos and images on my own server. How can I do this? Do I need to create a separate backend using Express or something similar?

[nyemsyf]

Do you know how to make it to work on mobile android and ios (upload file, i tried to add open and onClick: true but still not working...

[yantaosong]

hi, it is a great video, I have a doubt , console.log is not working in action function ?

[devangmanjramkar]

Can you please make a video on how to upload file to an API which accepts only BLOB using formData field passed to the server actions please

[investandcyclecheap]

Thank you so much for this helpful guide. I would change the title to include "uploading files to Cloudinary". There are not a lot of tutorials that are covering this method in next.