Node.js Express Google Drive API Example to Upload Multiple Files to Folder Using Service Account

uh Hello friends today in this tutorial I will be showing you that how to upload multiple files to your Google drive folder using node.js Express and the service account authentication method so you can see that guys I have inside my Google Drive I have created a folder called as images so I will be uploading files inside this folder guys so basically let me show you a very simple example so my application is running on localhost 8080 let me open this application you will now see guys this is the input file here we have the choose files button so with the help of this input field here we will be able to select the image files or any sort of file that you need to upload video file any file let me select multiple images here so if I go to my uh this one so I will select let's suppose these four Images I click open here you will see four image files have been successfully selected here you can see that and now guys we need to Simply enter our name email address and Country this is just optional Fields here and now if I click the submit button guys you will now see as soon as you click the submit button basically you can see all the files will be uploaded one by one you can see uploaded file uploaded file so you can see Google Drive API background you can see all the four files have been successfully uploaded you will see that one two three four if you refresh the page also this will stay here you can see that four image files have been successfully done now if you want to only select a single file you can even upload a single file as well totally upon you how you want to approach it so now you can see again this file will also get uploaded once it has you can see that this is a file so in this easy way guys you can upload multiple files to your Google drive folder it's very simple process I will be guiding you step by step inside this process on how to achieve this using node.js Express and service account authentication method so for this guys I have written a complete blog post on my tutorial website webninjadeveloper.com so in the description of this live stream we will you will find out the blog post link so please I will urge all of you to basically follow along with this video just read this whole blog post at each instruction I have explained in the detail what to do and why we are doing that concept so also just copy paste all the source code as well so let's start building this tutorial so first of all I will make a brand new project here inside my projects directory I will just make a new project here which will be node upload I will CD into this and I will open this Inside by Visual Studio code text writer so you can see it's a empty folder here and now we need to create the package.json file so we will say npm in a dash y so this will create the package.json file with the default options now we need to install Express first of all Express then we need to install the malta Library guys if you don't know about malter it's if basically a file uploading library inside node.js and then we need to also install the Google apis so Google apis guys basically it's a Way by which we can communicate to the Google Drive API it lets you it's acts as a driver for node.js so now you can see inside your package.json as soon as the installation is done you will now see this three dependencies are added automatically now we just need to make our index.js file guys so this will hold our node.js server sorry Express JS server need we need to Simply require the express module here and just start this express application at a port number let's suppose I started at 5000. and simply I will say that the app is listening on Port 5000 so now guys we can simply show a simple form whenever we open the home page you can simply say here we can require we can simply say that send file we can make use of this method and then we can see here index.html so basically we just need to create this file in the root directory which is index.html basically this will be a simple form we will be showing to the user simple HTML form to upload multiple files to Google Drive this is very simple process so we will have a simple form here guys so we will just have this form here and inside this guys we will have a input type of file and here we will be allowing the user to upload multiple files so you can even go to the blog post to follow along the step-by-step instructions so let me you can see that all the instructions are given here so you will follow the step-by-step approach so let me just basically write this code here step by step so that you guys understand because many a times what happens people don't understand let me just paste this code here and right here from scratch just wait so right here guys basically after this input file we need to give it a name attribute of files and this should be required attribute and in order to now add the multiple functionality we need to add this attribute which will allow the user to select multiple files after this guys we will have three input Fields out there this is not mandatory this is totally up to you if you want to say expect the name of the user it's totally up to you so enter name then we have the for the email address so that way you will allow all the users to upload to your local directory which is a single folder that's why we are getting this information so sometimes you want to get information so placeholder is enter country so after this guys what happens basically now we have this field out there now we need to Simply write some JavaScript code as well so at this moment of time if you load this application if I now start this application if I write you can see that app is listening on Port 5000 so if I open this now in the browser you will see this is the simple form is shown here so we also need to add a submit button as well guys so now we submit the form so input type submit the value here we will be upload files like this now you can see that so now we just need to write our JavaScript code guys so right here inside this first of all we need to select the form element so here we can do this using the document.query selector we will select the form element which is form and then we will be attaching basically guys event listener to it which is the submit event listener and inside this we will have the event object you will call the E dot prevent default to prevent the auto submission of the form and also we need to now make a simple fetch request guys this will be gone to the upload here like this and make sure that this is the async function because we are using a weight here so we are doing it a post request guides to this upload route so here inside your options we need to specify the method to be post and here the body will be simply the form data we would use the form data object here so basically this automatically converts all the information that you are expecting here this is the files name email and Country it will construct this form data automatically here you just need to pass the reference of the form that's it so this will be automatically attached to the body inside your fetch request that's all that you need to do inside this guys automatically this will be making a post request to this route so now we just need to make this route for doing this guys we just need to make this route here for this we need to first of all require some things out there inside your index.js let me show you for this we just need to require a different file which will be upload router we will make this separately in a separate file so we just need to require this file we will make this file just need to make this in the root directory router.js so just make this file and after this guys we also need to include some middleware functions which is body parts and middleware you are working with forms here that's why this middleware is necessary so we will say express.json and the next middleware is express.url encoded and inside this this expects extended property to false so these two properties you need to write guys just make it true in order to do this and also we will be passing this router as well app.use which is upload router that's it so now this file is complete guys you just need to close this file and now you just need to write your router.js file which is the main part of this application here we will be writing the code which will be required for basically uploading the files to Google Drive so now the very first thing we need to do inside this file guys we need to import the dependencies so we need to require the stream dependency which is the built-in dependency of node.js and also we will again require the express module which is expressed here and we also need to import the malter dependency and also we need to import the path module as well and from Google apis we need to import the Google modules so like this and then we need to make a new router which is equal to upload router so in order to make a new router there is a method out inside Express which is expressed or router and then we also need to make malter as well so malter reference and lastly guys we need to export this module so which is upload router so just write this line so this is very much required here because we are importing this file inside our index.js so just make sure that you write this line people just forget this line so just write this so after this guys we just need the information which we will create this key file path variable and we will use the path or join method and from the root directory we just just need to store this and you will store it as credentials.json so now we will be creating this file guys inside our Google Cloud console we need to first of all enable the Google Drive API and get our information inside this credentials.json so this is all be coming through the Google service account and we also will be having the Scopes object as well guys so this Scopes are nothing but what information you are accessing from the API so in this Google Drive API we will be accessing our googleapis.com slash auth slash Drive so this basically is the parents group it allows you to perform any operation you can delete file you can upload files so this is a scope so now we just need to go to Google Cloud console guys so if you have a Google account you will be having a just create a Google Cloud console you just add your credit card you will have this Google Cloud console account and after this guys inside your thing here there is option to basically create a service account so let me just first of all show you how it is done so just go to Google Cloud console and basically go inside here uh apis and services and so first of all you just need to search for the API which we are working through Google Drive so search for this API and Google Drive API version 3. so simply enable this API so after you enable this guys just go to the manage section here and here you will be enabling here you can see that this is go to credentials here and after this you just need to create your service account so this is a third option here we just need to create here and click on manage service accounts and here you click on create new service account and here you can give some name here let's suppose I give it as drive test project and you can give any name of your choice just give it a description this is the latest Drive upload project and then you need to click on this button create and continue and basically now you need to Grant permission so you just need to build be a owner so select this owner permission so it gives you the full access to the all the permissions so click on continue after this guys you need to now click on done so now your service account is created you will now see this is our project here simply click on this project and now you need to go to the permission section sorry key section and here you need to create a key here which is so you can see already one key is already created you will see a number 25 it is automatically whenever you create it you can even delete this key as well like this and now you need to click add key and now you need to create new key and there are two options out there you can select Json or p12 but I will suggest you click on Json click on create so this will create this file guys and it will download it automatically now you just need to shift this file here basically inside your project directory simply cut this and paste it here which wherever you are creating the project so simply you just need to open this with file explorer and simply paste it here and just rename this file to credentials dot Json sorry Json is already there credentials.json so basically this contains the information about your account guys which is what authori token URI so this is private key project ID all such useful information is there client email client ID so just close this this will be different for you so simply store this inside the root directory that's it now this process is now very simple we just need to make a authentication object here we will say simply here which is new Google auth Google auth this is a method we will use and inside this we need to pass the object it takes the key file attribute guys we need to attach it to the key file path this is our credentials.json file and then we need to attach the Scopes here we have defined the Scopes here inside the Scopes variable that's it so this is complete guys now basically we will be able to upload the file authentication here is done now we just need to after this write a method simple method which will be able to upload the files so for this first of all we need to add the route here so for adding this route we will make this upload router and we will make a post route and to the upload endpoint and here we will pass the Walter we will there are various methods inside Walter guys single allows you to upload a single file array allows you to so upload multiple but this is any method we need to use and this is a middleware function we are passing and then we have got the async function which is a callback function inside this function guys we need to surround our code in try catch block and we can console log the request body and you can even we can simply say here extract the body and the files from the request object after this guys we will be using a simple for Loop f is equal to zero so for each file we will be uploading so let's suppose the user has selected five files we will use this for Loop too upload each file so we will simply say f plus plus and we will use a weight keyword and this is the async function so we will simply create this custom function guys which will be upload file it will take the exact file here like this and it will upload it after this we will simply print out the body and then we will simply say the status we will send out the status 200 which is success and we will send out this message which is form submitted that's it so now if you any sort of error take place guys we will have the catch statement as well so let's suppose if any sort of error takes place then we will also send this message F Dot message so that's it all guys this is the thing now we need to Define this method which is upload file this is the actual custom method that we will Define here to actually basically upload the file to Google Drive so now let me write this right here at the very top here which is const upload file and in this will be again be a async function guys this will have the file object so file object has various properties guys first of all we need to convert the file to a buffer we will construct a variable and we will say new stream and this contains a method guys which is pass through so this stream is basically is a node.js module guys it's a built-in module it is used to convert the files into a smaller smaller chunks or you can say buffers so this will convert to buffer and now after that you will call a method of the buffer which is end and inside this you will pass the file object dot buffer that's it after this guys we'll now get the data so we need to first of all authenticate we will say Google Drive this contains a Google Drive method and this takes some objects guys so first of all we takes the version number of the API this time we are using the version number three there is also a version number two but we are using the latest version of the API and then it takes the authentication we will pass the authentication that we have defined here at the very top so after this guys this returns a promise files dot create so you can see various methods are there we will use the create method and inside this this takes some options guys first it takes is the media media represents the number of photographs or videos that you need to upload so we need to give it a meme type so this will be file object dot meme type foreign type is just an extension it can be images can be PNG jpg GIF or any sort of extension it can have after this we will have the body as well so you will attach the buffer state so this is we are attaching the buffer stream of the object that's it after this guys we just need to also attach the request body object as well request body inside this we need to give it the name of the file which is coming through file object Dot original name property which is a malter property to get the original name of the file after this we will put the parents and here is the interesting part guys you need to copy paste the Google drive folder ID so now I go just go to your Google Drive guys basically let me show you what happens here it's very simple let me just remove this file here from so now just go to your Google drive wherever you want to upload the files to so just create a folder new folder here guys new folder let me create this as Drive click on create your folder is created now just right click on this folder and click on share after this guys you will now see there is some options out there to whichever people you need to share it so now just go to your basically you have created this service account you just need to go to the permissions detail section and here you will find out this email address so simply copy this email address of your service account and after this you just need to share this so just paste this here let me paste it just paste this so you are sharing this access to this service account so that this service account would be able to upload the files to this folder click on send that's it now you can see that three people have access to this folder which is the folder of account three accounts if you hover on to this you will see now we will be able to do this process so now after this we just need to get the ID of the folder and you can get the ID very popular you can see this is ID Google drive folder ID this is the ID simply copy this and paste it here simply paste it that's it this is all that you need to have after this guys we have the last property which is fields so this is equal to the ID comma name that's it that's all that you need to do after this you can simply say a message to the user if the file is successfully uploaded or not we can simply say in backtick symbol uploaded file has the name which is the data dot name and ID as well data dot ID so that's all guys so this is Now application is almost complete let me now test this application you can see app is listening on Port 5000 let me open the port open the application you will see let me select the files here files I select enter the name email country click on upload file so now you can see that automatically one by one the files will be uploaded foreign just wait just go to the console here let me see guys what is the problem here click upload files let me see the problem guys and show to you what is happening here you can see that we are getting this data here here so make sure guys you have copy pasted I have haven't done any sort of spelling mistake here credentials Json what I will do guys basically I will go to my description basically this blog post and I will simply copy paste the correct code here so there can be a spelling mistake as well if you write the code and let me again paste this ID here this is ID here and rest of the information that may also paste this as well so this is the file here let me paste it this is a code here upload request sometimes spelling mistakes can occur guys that's why I'm cross checking it uh because I the code is correct totally code the correct code is correct I'm just cross checking it so let me paste this here so just make sure you name your file as credentials inside the root directory cre d e n t i a l s so the spelling is correct was I think the spelling is c-r-e-d-e-n -t-i-a-l-s so I are spreading is correct so this file is done uh inside your index.js let me copy paste that file also and that is index.html let me paste this file here you see that um this is our index Dot sorry this one index.js so now guys let me rerun this file once again you can see that basically it is saying sorry let me change the port number to 5000. so app is listening on 5000 guys so now let me open this again so you will see that now if I want to allow this four files we select and now if I open this you can see one by one the files are uploaded here you can see one file is uploaded second image is also uploaded you can see that the four image files have been successfully uploaded to the folder guys you can see that this was just the spelling mistake you need to first of all go to the blog post and copy paste the full correct code line by line that I have shown you inside this video this is a very simple process by which you can upload multiple files to a Google drive folder using the service account authentication method so thank you very much guys for watching this video and I will be seeing you in the next video

Channel: Coding Shiksha

Views: 8,891

Keywords: google drive api, node.js express google drive api

Id: gErpJee99Fs

Length: 27min 44sec (1664 seconds)

Published: Fri Nov 25 2022