Use Server Actions to Upload Files in Next.js with Cloudinary - Dev Hints

server actions are a great new feature in nextjs and react that give us some serers side capabilities of doing things like uploading files right inside of our components so let's see how easy it is to upload files to cloud n inside of server actions server actions are actually built on top of react actions which give us those serers side capabilities inside of the components now before we jump into that being able to specify between client components and server components are a completely new idea as well but now the default is server components where you have to actually opt in for a component to a client component but really the benefits of being able to use a client component are things like interactivity and browser apis which maybe not everybody needs so being able to take a little bit more consideration into performance when you don't need those things we can use server components which provide some more strategies for how we actually provide a better experience and more performing experience in our application but on top of that we also get some new features for how we actually build out those components such as how we fetch data some security considerations and also some caching which we're not going to get into here but we can see that there's a lot of benefits for how we actually start to use these server components but along with this new component architecture we also get access to server actions where technically you can opt in client components in order to use server actions but we're going to focus on how we can use those inside of server components where really it focuses on being able to create these actions where we then invoke through different means which one of the common ones is be able to submit that through a form so we're to start off inside of an xjs application where I'm currently listing out some sneakers if we look at the page we can see that we have all of our images listed out from the server but we also have the ability to add a new image now currently this form isn't doing anything but what my goal is is to use a server action so whenever I submit this form I take that image and I upload it to the server but to start I'm going to define a new async function I'm going to call that create where for now I'm just going to add a console log called create just so that we can test this thing out and I'm going to add a form action where I'm going to pass in this function as the action if I go to this page and I select a new file and I try to submit it we can see that what actually happened is the page refresh and we now have that image as part of our URL we never actually got that console log that's because we also need to opt into this server action by adding the use server directive where now if I try this again we can actually see that I get my console log for create but next I actually want to get that file from this function nextjs actually passes the form data as an argument to this function where then I can add the type of form data but then I can get my file by saying constant file is equal to form data. getet where I'm going to specify the name of the input which in this case is image we can see that on the in put I Define that name as image which is what I use to get the file so before we move forward let's actually console log this out just to see our progress or if I try to submit that again with the current selection we can see that I indeed get that file logged out to my terminal now the reason that we're seeing this in the terminal instead of maybe the browser console is because this is running on the server not inside of the browser but now I ultimately want to take this file and I want to upload it to cloudinary to do that I need to get the buffer version of this file so first I'm going to turn it into an array buffer so I'm going to say constant array buffer is equal to await file. array buffer but because this form doesn't know what type this is I need to also make sure that I specify that I'm going to get this file as a file that as one more step I'm going to say constant buffer is equal to my array buffer where I'm going to wrap this with a new instance where I can grab an array of unsigned integers which is what I'll ultimately upload to Cloud Nary now in order to actually make that upload we want to use the node.js SDK since we're in the server context so now because I already have the cloud Nary SDK installed and configured where if you need help installing configuring the node SDK check out this video above I can use the cloud. uploader do upload stream API I'm going to pass in an empty options object but then I can specify theend method where I'm going to pass in this buffer now this upload stream method isn't going to return a promise so we don't have a way of being able to await that to perform any other additional options so what we're going to do is actually wrap that in a new promise so I'm going to say await new promise where I'm going to define the options of resolve and reject where inside of this function I'm going to first copy and paste in my upload stream where as the second argument to upload stream I can now Define a function which is going to be a callback where I get a potential error as well as the result so inside that function I can say if I do get an error I can reject that error and then I can return otherwise I can resolve the result but we're not necessarily going to do anything with the result in this context all we want to know now is that this was successfully uploaded so let's go ahead and try this out if I head back to my form and I click submit and I look in my media library I can see that image now uploaded to my cloud so that means that the upload was successful but nothing ever happened after it was successful now to start the resources that we're actually requesting here are all under a specific tag so to start we want to make sure that we're actually defining that same tag which I can do simply by defining inside of my options object the tags property where I can specify an array including that tag but all that's going to do is actually help us organize the assets that we're uploading by tag but we also need to be able to refresh any time it successfully uploads or more specifically we don't want to just refresh the page we want to invalidate the page so what we're going to actually use is the revalidate path function which is going to allow us to purge the cache data for the specific page which in this case is just our homepage so I'm going to import my revalidate path from next cache where after this was successfully resolved I can now now add revalidate path and I can specify my path which is my homepage of just simply a slash if we refresh the page we can see that we're now back to start but if I select that Adidas image again and I actually submit it we can see that within a few seconds the page actually refreshed in real time giving us that now uploaded asset and that's not just the image that we uploaded before that's a new one where if I select a different one such as maybe this Puma sneaker I can submit that and similarly within a few seconds it just refreshes on the page after it's been uploaded and delivered next up let's learn how we can get more out of those uploads by automatically tagging and categorizing them on upload with AI

Channel: Cloudinary

Views: 19,949

Keywords: nextjs server actions, server actions in next js, upload files server actions, cloudinary nextjs, cloudinary next js tutorial, nextjs server actions upload image, nextjs server actions upload file, nextjs server actions upload to server, nextjs cloudinary, nextjs cloudinary upload, upload image to cloudinary nextjs, upload to cloudinary server actions, upload to cloudinary server nodejs

Id: 5L5YoFm1obk

Length: 6min 13sec (373 seconds)

Published: Tue Oct 31 2023