NextJS Upload to Google Cloud Using Signed URL

hey folks in today's video I want to show you how you can use nextjs to upload documents to Google cloud storage using signed URLs in my last video I showed how to upload files using server actions and API routes and signed URLs is another good option especially if you are doing very large files and the cool thing about signed URLs is think of them as a token with embedded permissions in them so that the user can upload the file even though the user may not have permissions to write to that bucket signed URLs can be used to either upload or download objects into your storage bucket in this case we're going to use upload I'll put a link to this in the description down below but this is a documentation from Google on how to do this and this is the code we're going to basically be using and a quick overview before we start implementing this into our code is you create some options we're going to use version 4 the action is going to be right because we're uploading this document expires is a property that tells you how long this URL is going to be good for since this signed URL is essentially a key that gives the user permissions to upload this file into your cloud storage you don't want this to last forever so generally you leave it only for a little bit of time in this case they're doing 15 minutes and then we add in the content type and then you use the client library from Google to provide the bucket the file name and then the options to get that signed URL and then that URL can be returned back to the user or in this case back to our application and then we can upload that file from there this is the form we're going to use this is the same form that I used in my previous video the form only has one input which is the file and it has a name of file and then we have a button to submit our f form what we want to do now is we want to submit the form we want to go get that signed URL and then use the signed URL to actually upload our object so the first step is getting the signed URL I'm going to use a server action for that because it's I think it's the easiest way to do it I already have a file for Server actions in my lib folder but I want to create a new method that's going to get the signed URL for us so I'm going to export a new method called get signed URL and it's only going to accept the file name then we're going to create a new storage object which is coming from Google's client Library if you don't have that installed you need to do an npm install for this dependency right here and I've already done this but that is just npm install and then at google-cloud storage we will have to add some extra things into this storage for permissions like I mentioned earlier but we'll come back to that in a little bit now we're just going to get the signed URL like they showed in the documentation and to do that we call await on the storage. bucket and then we give it the bucket name we give it the file name here and then we call get signed URL and we pass in those options again I'm using the same options they had in the documentation there are other options in here if you want to go to the documents and look at that and then lastly we'll just go ahead and return that URL now let's go back to our page let's call this to get our signed URL and then use that to upload our object and the way I'm going to do this is I'm going to create a new method that's going to handle the submit action of our form and then from there we're going to call that get signed URL method and then we're going to upload the object here's that handle submit method it's going to accept our form from down here so let's go ahead and call that so we'll say onsubmit and we're just going to say handle submit now we need to get the file from the form get the file name and then use that file name to call get signed URL so I'm going to create a form data object by calling event. current Target to get the form and then pass that into a new form data and then I'm going to get that file object from data. git with the name of file and this file matches the name of the file input down here now we can go get our URL so we'll say await get signed URL and I'll go ahead and import that from our actions and then this will be file. name and assuming that this is working correctly this is going to give us back a URL and so just to test that I'm just going to go ahead and say console.log and I'll tell it to log out that URL and now we can go test this however I do know this it's going to fail because we need to add some extra permissions to this in order for this to work we need to add in a service account in Google cloud and then we need to create a key for that service account and use that key to call our get signed URL in our server action and this is just a limitation from Google that basically says if you're going to create signed URLs you have to use a service account to do it at least that's the way that I understand it and to do that we're going to go into Google cloud and we're going to go to I IM which is identity and access management and we're going to create a new service account so I'm going to go to service account and then create service account and give it a name I'll call it storage demo user and then create and continue and then we need to give it a roll and in our case this service account is going to be used to create those signed URLs so it has to have the permissions to do that normally Google's documentation tells you what the best Ro to use for this is for some reason for this one it doesn't I'm just going to go ahead and give it the storage admin roll and then continue and then done and now we have a storage account on our project that has permissions to create signed URLs the next thing to do is to create a key for the surface account and then we're going to use that key in our application to create this signed URL so if you click on the service account and then go over to Keys you can add a new key I'm going to go ahead and say create new leave the type as Json click create then it will ask you to download this key make sure you save this somewhere where you can keep track of it you can only download this key once if you lose it you'll have to recreate a new key so I'm just going to call it storage demo key and I'll go ahead and save that now we want to add that Json key into our project so I'm going to go ahead and drag that down into here now that that file is in our project we can reference that when we want to use it to create signed URLs what we do now is we go back into our server action and when we create this new storage object we want to tell it to use that key so that has the permissions of that service account and they have a really simple way of doing that so in this storage we pass in a new object and we just say key file name and you give it the name of the key in your project so storage demo key. Json and now when you use this storage object is going to use that service account's permissions if you're not comfortable with including the Json key in your project there is other ways of doing it I believe you can use environment variables and things like that so if this way doesn't work for you go check the documentation and look at for alternative AES but for this demo this is the easiest way for me to do this now let's go test this and see if this is going to create that URL for us I will go into my signed URL uhoh I forgot one thing and since we're are using the onsubmit method of our form we have to use a client component for this so in your page just add use client at the top of it now we can go try to run this again so I'm on the upload signed URL page I'm going to go ahead select to my file and I'll open up my developer tools here and I'll click upload what happened that didn't actually work one thing I forgot is in this handle submit you want to make sure that you do a prevent default cuz it was trying to submit the form which isn't what you want to do um but once I added that in and I clicked upload now it's giving us back this URL and now that we have this URL now we can use that URL to put our file into that URL and it's going to go into Google cloud storage and if I go into the documentation from Google you can see at the bottom here they show how to do this using curl and we can't do this with curl but we can use fetch to do this in our next JS application and luckily that's pretty easy so I'm going to go ahead and just paste this in so you don't have to watch me type it and to do that we're going to await and we're going to call Fetch and we're going to pass in the URL that we just got back the method is put which is very important the body is the file object from up here and then headers is the application octet stream then once you get back to response obviously you'll want to handle it however you feel fit for your application I'm just going to go ahead and log this out just to make sure that it's working correctly and now let's go test this I'm going to go ahead and refresh the page and clear everything out here I'll choose a new file and I will say upload there is the URL and it says that the response was okay so that's good let's go into our bucket and see if the files there if I refresh here and there is a file which means this is working for us there's one other thing that might happen if you're doing this for the first time and you might get an error saying that it's not configured for Cores correctly if you do get that you'll need to configure your bucket in Google Cloud Storage to allow cores from your current computer or the domain that you're going to be doing this from I'll put a link Down Below in the description uh here's here's a documentation from Google on how to do this there's a couple ways you can do it you can do it through the command line in Google Cloud using this Command right here and the way this works is you create a Json file in your Google Cloud uh CLI environment and then you import that and they have some configuration samples here so if you go here this is what you would want that file to look like really quickly I'll go in I'll show you how you could do this I'll also show you how you can use the client libraries to do this directly from your code you want to go into the console in Google cloud and then come up here and and activate the cloud shell and the easiest way that I think to do that is then to just go ahead and click open editor and what this is going to do is basically open up vs code inside of the cloud shell if you click over here for the files you can see right now nothing's open I'm just going to go ahead and say open folder and then this is the home folder for the current user in this case it's me I'm going to go ahead and click okay and then in here I'm going to right click and say new file I'm just going to call this course. Json and then I'm going to go over to their example I'm just going to copy this whole file right here put that in there let me make this a little bit bigger you'll want to update this origin to be whatever you need it to be so if it's your website or in my case I'm just going to use Local Host because I'm running this locally so I'm going to copy my local host and put that in there you do want to change the method uh you want to also include put and I'm going to leave the max age seconds as it is and then you can close that and you can go back into the terminal then you want to run this command here with the correct file names and bucket names in it so I'll go ahead and paste that in here and then update the files and then update the names okay there's mine updated with the correct file names and the correct bucket name I'll go ahead and run that if it asks you to authorize this is just giving it permission to do it go ahead and click yes if you were getting the course error before that should go away now after adding that information in there like I mentioned before there is also a way to do this using the client library and this is that code this information will all be in the GitHub link down below but essentially you're just running set course configuration and you're passing in the same information that we just did you can see here I'm just telling it to allow anything for now since it's just a demo but as far as I can tell you only have to run this one time so you don't want to do this before every single call and I think that's pretty much it for how you upload to Google Cloud using assigned URL doing it this way is a great option when you have really large files um or you just don't want to have your server processing that much data for example if you need to upload 10 20 30 gigabite files you generally don't want to post that whole file to your server and then upload it you can just let the client do it themselves I am not an nextjs expert so if I'm doing something way wrong here please let me know in the comments down below I have done some of this stuff before in net but I'm just kind of doing this for fun for a side project but thanks for watching and I'll catch you later

Channel: ScriptBytes

Views: 720

Keywords: NextJS google cloud signed url, NextJS GCS Signed URL, NextJS Signed URL, NextJS GCS CORS, NextJs Put Signed URL, NextJS SignedURL, NextJS Fetch Signed URL

Id: 5BFMWVajuS4

Length: 10min 40sec (640 seconds)

Published: Mon Mar 04 2024