Uploading files in NextJs 13 using Server Actions
Vložit
- čas přidán 27. 07. 2024
- 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
🔗 www.hamedbahram.io/courses/ne...
👉🏼 Source code (Github)
🔗 github.com/HamedBahram/next-u...
Chapters
0:00 Intro
1:50 Project setup
3:00 Setting up dropzone
6:20 Adding server actions
17:12 Outro
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.
Thanks, I'm glad you found it helpful.
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.
Thanks Alireza Jan, I'm glad to hear that.
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!
There you have it! Glad to hear that.
Followed part of the steps from the first video and went with the actions from this, working nicely - very easy to follow!@@hamedbahram
Thank you for a making great videos, Hamed. A huge from Brazil
Thanks Leonardo! Welcome to the channel 🙂
Great video Hamed! Thank you!
Thanks Hosna!
Thank you mate. This is so helpful!
You're very welcome!
you deserve way more subscribers !! Thank you so much!
Thank you 🙏🏽 I appreciate that.
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 :)
Thanks for the idea! I'll look into that.
you should name this as "Uploading files to Cloudinary in NextJs 13".
Good point 🤔 Thanks for the suggestion.
you're a legend for not using typescript bro 😎
It's a mix; some of the videos are in TS but simple enough not to make the topic of the video more complex.
Thank you very much!
You're welcome!
Thanks Hamed
My pleasure!
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.
Glad it helped! Thanks for the suggestion, that'd be more specific.
I was re-watching this video after learning about react-hook-form and I was wondering how youd do this with that library, specifically after calling RHF's handleSubmit(andYourSubmit FormActionFunction). It would be nice to add some other form inputs after your aweosme dropBox! Thanks! @@hamedbahram
Nice touch about the signature. Thank you. What kind of account you created on cloudinary (there are the programmable media and digital asset management)?
Thanks. I'm on a paid plan that's based on number of transformations and uploads per month. The free tier is pretty generous.
Dear Hamed, We are Proud of you, thank you for your great videos. How we can use only the part of React Drop Zone as a component and get files in Server Action to make our code Reusable in different forms ? I can't receive my files as FormData if I use React Drop Zone as a component as a child in its parent form and Server Action.
Thank you! I appreciate that. That's a good question, let me try that out.
thanks a lottttttt
My pleasure!
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 ?
Thanks Abbas! Glad you find the content easy to understand. You can implement something similar here as well, whereby you would send the form data to your server action and let that handle everything instead of returning a signature to the front-end. I tried to show a typical flow in React apps but with use of server actions instead of an API route.
Thanks for the video, Hamed! Do u have some solution about fetching the url images from backend and showing them in front?
Do you mean after uploading them?
@@hamedbahram yess
@@sirpripyat4274 Once you upload them to your cloud storage - cloudinary in this example, you'll get a URL back which you can save to your database, you can use the same URLs to show the images using the `next/image` component. I'm not sure if this answers your question, but let me know if any part of this is unclear?
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?
Yes you would need to spin your own server, since the NextJs backend is deployed as server-less functions that don't live beyond after the execution.
@@hamedbahram Which structure do you use for image and video uploads? Are you creating a separate backend or are you using a 3rd party application?
@@musayazlk7654 I use cloudinary + google cloud storage for most of my meida storage.
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
Well if you're using server actions, you won't need an API route handler, you can just perform any logic in your server actions. If you don't want to use server actions however, you can just handle form submission like we used to in regular React and then hit your own API endpoint with the data.
@@hamedbahram okay, thank you.
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?
I'm afraid so :) you have to loop and upload them one by one. Let me know if you figured to upload multiple together.
@@hamedbahram From reading the doc there is multiple upload in node.js though, so maybe it's possible to build a next API route that receives files from the front-end as buffer and then batch upload using their SDK. But that's out of scope for this tutorial.
@@liu-river Beautiful! Thanks for sharing your findings Liu!
hi , it is a great video , I have a doubt ,console.log is not working in action function ?
Hey, thank! Server actions run on the server, so you need to look at your terminal to see the `console.log()` result.
I have an issue where data doesn't get sent to the backend API when uploading a file that is larger than 5 MB.
Have you set any size restriction on the dropzone component?
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...
Good question 🤔 should work in a similar way. I'd have to test it out.
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
Make sure you've added the `experimental` flag to your `next.config.js` and also keep in mind that you cannot create your server actions inside client components, you can create it in a separate file and import it in your client components. Let me know if this solves the problem?
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
That's interesting! I'll keep that in mind for future videos. Just to clarify, you want to upload a file to an external API using server actions?
Sir when you will launch your course I'm curiously waiting for that.
Some of the modules are done and available to start watching. I'm aiming to complete one module every week, and so you can continue learning gradually with me.
How do you upload multiple files?
Oneway is to allow selecting multiple files and loop through them and upload them one by one.
Just Asking Can we also sign and upload In same server action is it possible or there is any caveat
yes you can!
hello brother please make a video on (express js) backend and (next js ) frontend about "server side " filtering data and pagination not using server action
Thanks for the suggestion. I'll keep that in mind for the upcoming videos.