Upload Files/Images to Google Drive Using Node.js Express

okay so this is what will be building an application where you can upload images to your Google Drive account so over here this is my front-end application when I just click on images if I select the images and I it's going to tell me the images that are selected if I submit it's going to upload them to the Google Drive and when it is done uploading it's going to return a successful message you can see successfully updated to drive if you face it's going to tell us is feed so let me go to my drive now and we can see if I refresh you can see all the images are there this is not just for images you can also use this to upload files Okay so all right so let's dive into coding okay first things first so all we have to do is we have to go to our drive and just create a fold that we will want to store our site so let's just cut this arrows I just got this Choice folder I just got these files you want to stop our face so yep so these device this is the folder I want to store our file so next we'll just we'll have to create a Google Drive service account credential so that credential is what we'll be using to interact with our Google Drive so it's just a Google Drive service credential so let's to do that we'll just go to console.goko.com um console.cloud.google.com if you don't have um a console account you can just create a Google Cloud account and you have access to the consoles over here you go to app API and service so you go to your API and service and it's going to take you down here so over here you just come up here and search for Drive API so it's going to just pop list of drive so you're just going to go to Google Drive API you click on the Google Drive API is going to take you to somewhere here yeah you should going to click on enable Google Drive API so you and then put that to yep that has been enabled so what we're going to do now is we're going to go to the credentials um then you go down you're going to click on manage service account okay so over here we are going to create a service account so this service account is only specific for this Coco type API so you're just going to give a name just call it upload price you click create and continue you give it a row I'm just going to give it an editor editor have access to create upload and delete file from using this um you we should be using this credential so I'm just going to leave it as an editor okay so I'm going to click on continue so yep I'm going to just leave this at the city some click on done yep so I'm going to just click on so this is it has generated a kind of like an email for us so for now we don't have a key so we're going to grid and generate our credentials okay I'm going to click on it do I come I'm going to go to Keys up here and I'm going to click add keys so create new key I'm going to leave it in the Json format I'm going to create so the key has been created for us and it was automatically downloaded over here so yes so what I'm going to do next I'm going to go to the download where it was downloaded this is the keys that we downloaded I'm going to copy it I'm going to move it to the file where I will be creating my application okay so I'm just going to rename it to create create complete credentials whatever you want to name it to so that's that also please remember that this service accounts will this you will not have access to all your Google Cloud that can just this particular Drive service so that's what why it's called this service account just for a particular service in Google you can have a good drive service you can have a map service we have different services so this particular service is only specific for the drive that we just created okay so that's that so next I'll go to my visual studio code I'm going to initialize my note project npm emits and also why I'm just going to yep and see we have our potentials here and we can see the credentials that's the the Json credentials that we got from creating the service account so I just moved it down to where the project is so right they will just have our email let me have other token that will be using to connect to the Google and Google our Google Drive account so these are the credentials that will be needing so what next I'm just going to create my typical node Express projects um I'm going to just be doing um npm install Express I'll be using Google we're using Google API I'll be using Moon la let me just check the spelling of this and see m u l t e r okay uh with m u l t are also I'm just gonna go here m-u-l-t-o so what's like just helped us to handle form data then Google API since we'll be connecting to we'll be using a Google reconnected to Google makings of Google service so we'll have to install the Google apis and the express is our typical Express project okay if we go to over here we can see that we have successfully installed are successfully installed our our dependency so far I'll just create a start script um I was running around with me starts when you hit npm studies you do node index.js okay so I'm just going to create our edex for now the main files index.j I'm going to create my index.js here and it seems I'm just going to create my front index.html you will be using to upload the files Okay so yep so we're going to proceed from here so let me just go to this place where I have my HTML5 I'll just copy the template so it's not as necessary HTML because I'm just going to copy the template over here I'm going to explain what it's all about so it's a HTML and yep so what exactly this is just the styling um what I'm just doing is this just like a form there you come just click on select image or files then you click on the submit so over here when you click on this submit button it's going to change the color to red and event list now what this does is just to count the number of you know files you selected and just going to I put the number of files beneath the five button so that's what this is doing on change you just check the length of the file if it's more than one you say okay the length close to that the file selected if it's not more than one you just give the name of the file that you selected okay so that's what is here so I'm going to also create a template for my let's press okay I'm just going to do this and yep just going to copy that over here a link to all the codes are on my git rep I will share the link so this is more like a template for our expert it's very simple we're using this stream API this stream is a call node module what it does is it helps to to redirect data so instead of saving the data caching into that to your local storage you just read read directly from the source which make it more efficient compared to other kind of reading and writing of data so that's the string we need to express the modulus we said LS it helps to handle from data then the paths then there were questions we're using Google API we just have to bring it since we'll be using it to create authentication and all that so while creating an instance of our Express we are creating an object of our mode lab then we are seeing the if you use Json um okay but I say when you go to the slash issue just take you to the index.html which is here okay so if you are we are using glucose 50 50. so let me just run the application I see so it's running let me just go right here because 50 50 okay so application is is just our HTML fan the implementation is not there so now let's proceed to write our implementation so again I will not just be writing it I want it to be very short so we'll just go over here and and just I'll just copy this first okay and this this moderative form so I'll copy this to handle the some from submission I'll go over here and I will just paste it here so what we are doing here is a user Clips on the summit button on the form what it does is it collects all the files that you selected to upload and it's just going to make a HTTP code to our upload endpoints which will be creating it just collect all the image and pass it down to that point if it's successfully uploaded it's going to say okay image of the floor project to drive if not it's going to tell us the reason why it was not uploaded it's going to see it wasn't included so that's basically what I'm doing here very straightforward so I'll go to my index.file and create the upload route so to do that again I will just go over here and just copy the output routes which is very very straightforward and simple so I will just copy that and just back here and this is our upload route so before then I was creating a since this is our credentials that we got from our Google Drive service account which is there so the name you give to it is going to be the name that point so what I'm doing is I'm just getting the absolute directory to read the credential is so wherever it is on your system on your server it should be preparing to yourself and you just get the absolute impact so you can get hold of the file so I get a hold of the file and I'm calling the five key five parts so the scope is basically going to be drive if I copy this and paste it on your browser you'll see it's going to be drive so I can just rename it drive directly ports most likely I will um most likely I will see what's going on here so so this is how this group is supposed is this scope is a traps cook and you just confidence and we can see this scope is a drive okay basically so it's a drive scope and it can change so you just like we're seeing this drive we're seeing this is the J5 Parts which is where our credential is um is going to be a drive so we're just creating the Google authentication using google.hot.google odds to create our authentication so it's going to use our credentials so create generate an authentication so it can connect through our Drive account and save whatever we want to save and perform the operations we want to perform so this is our post endpoint we are just saying to upload upload the end products I want to use I go to slash upload issue issue you are using this upload the model I should collect all the files we are getting from okay we should add all of the any of them that's in respective of the format you should collect them and here we are looping over the files and we are getting each of the files and whenever we get each of the file we pass it to the upload function what the upload function does is to collect that file convert it to a you stream a buffer stream and then save it through our Google Drive account to know how we're going to determine which of the folder isn't going to save it to okay you know we can have different kind of folders on our drive and how we're going to specify the exact food that in which our Google our fight should be saved us all we're going to do is identifier if you look at this top here we have a photo slash one ID here so I'm going to just copy the ID of the folder you want to save your files to and just go over here and just make it the parent so these parents stuff here you're going to so this parent is where it detects where to save the image for for okay so what you will do here is we collect each image we pass it to this function it's converts it to a stream okay it uses our credential through to save to collect the image and use our credential to log into our drive and look for this folder with this parent ID and save it there and the feeder usually add their name and the one is done you know I just console local key file was uploaded and so over here when you're successful here I'm going to wait so when you success I'm just going to say okay from submitted if there's an error I'm going to scratch the error I'm going to send so that's exactly what it is so I think I'm done here so let's just test it out to see npm stat and yep so before then I think we're not yet done to test it before then if we go to our credentials we'll have our our clients email where's it Basics we have our client image so what you are going to do now is that remember the way Drive Works before anybody have access to you your folder it must be authorized like you must Grant the person assets so this client email now which we got from our credentials you go over to your to your drive and you're going to just click on give you're just going to give you the permission to the email and you just make it an editor so you can write read and edit so whenever any operation is being performed it's been performed under the name of this email which is on our credentials so assets has been granted to this particular email which we are getting from Academia so make changes to our drive so I think that's that so let me just test he starts to go to 50 50 again select images um okay I think um and just refresh select image I can select this myself and this let me just select both of them for if we meet selected click on submit it's going to wait until if it's until submitted so okay so features we can see okay same successfully submitted to drive so let me go to drive you can see both images are there verify click on a single image let me just click on this one close this image is going to just tell us the story image if I add more than one image it's going to like let me know list of the images added so click on submit and let's see if this is going to okay successfully submitted to drive okay if I go to we can say that we have two images on our folder so that is that for the course so if you and if you would learn from it you can subscribe and like and also share so if you want me to do this using reacts Angola any other framework or using Java sprinkles you can also permit down below and I will get it done

Channel: Tech With Den

Views: 78

Keywords: Google Drive API, Node.js Express Google Drive API Example to Upload Multiple Files to Folder Using Service Account, upload files on google drive, Service Account, google service account, tech with den, Upload Files/images to Google Drive Using Node.js Express, google drive node api, google drive node js, google drive nodejs service account, upload files to google drive, upload images to google drive, 2023, upload images to google drive using express

Id: jaNo14iQdxk

Length: 17min 29sec (1049 seconds)

Published: Wed May 31 2023