Build a Node.js Express Google Drive API With OAuth2 to Upload,Delete & Download Files in Browser

uh hello guys welcome to this video so in this video we will try to build out a

mini Google Drive clone inside nodejs Express with full authentication and we

will provide the operation we will let the user to upload a file download a file delete a file and

display the files from their respective Google drive this is actually the application I'm running this on Local

Host port number 5,000 so it's a simple nodejs express application where we

actually have this login with Google button so first of all you need to authenticate with your Google account so

as I click the button I will be redirected to my Google account I need to select the Google account and it will

show you this warning that Google hasn't verified this app because you are building it on Local Host that's why you

need to click on continue and then you need to verify the access just grant the permission here click on continue so

once you grant to permissions you will see all the files will be shown right here the latest files from your Google

Drive I'm showing the top latest 20 files so you can see the name of the

file alongside with the extension you will see that so we also have the form

where we allow the user to upload a file to Google Drive so if I select any file

image video any file we can select so as I select this file you will see the the

file will be selected and we have this button if I click upload file so you

will see it will take some time and after that the file will get uploaded

and you will get this notification the file will get updated right here and we provide these buttons as well if you

want to download this file or delete this file and as I click this file this is clickable I can click this file and

you will see the file has been successfully uploaded you can see the Google Drive Link this is the actual ID

which is given by Google drive after they upload the file so this is actually my file here I can download this file by

clicking the download button so as I click the download button you will see the file will get downloaded and you can

see I can open the image file or I can click the delete button as

well if you want to delete this file as I click the delete button you will see

the file will get removed and if I visit the same link once again you can see

the file is will be deleted so the file no longer is there

so so this is my Google Drive here you can see that file has been

removed so you can see no file is present that file is removed and you can

see we have showing the latest 20 files from my Google Drive so if you want to

download any of these files you can click click the download button as well so it is directly interacting with the

Google Drive API in order to perform these operations to download files delete files display files or upload

files so we are actually uh interacting with the Google Drive API so you can select here any

image file click on upload file and you will see as soon as the file will get

uploaded you will see you will get this notification and here you can see the file is

uploaded so you can download the file you can click the link and it will actually show you this is the file is

uploaded so we will be building this application from scratch in nodejs

Express let me show you briefly which Technologies we will be using in this tutorial so I will show you all the

modules one by one so first of all we are using Express module which is actually used to build out your web

server inside nodejs it's a very popular uh app package in nodejs then we will be

using Google apis this is actually the STK where we interact with the

directly we uh do the authentication part before we use the Google Drive API

so this is actually a API client if you want to use any Google API in noj Express you install this module so it's

very popular module 2 million weekly downloads and we will also be using embedded JavaScript templates which is ejs which

is used to embed Dynamic JavaScript inside your HTML we'll also be using this and now to upload files we will

also be using molter which is a nodejs package if you want to upload files

inside your application we'll also be using this module as well so all the source code will be given in the

description and uh lastly if you we will

also be storing the information in the sessions so that's why we using this package specifically designed for

Express applications which is Express session so it's a session middleware where if you want to store some

information across sessions you can use this package so now in the next section we will start building this application

from scratch so I will be seeing you in the next section uh now to get started

guys I'm there inside my project directory I will come out of it and I will make make

a new directory I will call this as Google Drive clone I will CD into this

and then I will open this inside vs code Visual Studio code so I'm using this

editor for building this application so now to get started we need to initialize

npm in a-y so this will actually create your package.json file with the default

options so in the left hand side you will see package. Json file will get

created now we need to install the modules I showed you in the last section so Express will be the web server molter

will be used for file upload ejs is a template engine and Google API with the

module to interact with to do the authentication part and lastly we need to also install a module EnV which is

used to store useful information inside your environment

variables and also Express session which is used to uh store

variables inside session these six packages I use express malter ejs Google

apis. EnV Express session so install this by executing this

command so now you can see all the modules is installed you node modules folder has

been generated created and inside dependencies we using the latest versions of all these modules

so just close this file and just create your index.js file which will actually

hold all your code where you'll be writing the express code for starting a

basic Express server so we'll be requiring the Express package so

you'll simply say require and inside Express I will create a very basic

Express app and uh I will start this

application on port number 5,000 and in the call back

here we will say that that the app is listening on Port

5,000 and then now we also need to set the view engine which is ejs that we

installed so we can directly set this using the set method and we can in the second argument we can pass

EGS and here when we go to the homepage we need to load a template so all the

templates by default in ejs is stored in the views folder just create a views

folder and inside this create your basic index EGS you can call this anything I'm

just calling this right here this will be a basic page which will contain the

login button where we will do the authentication so for building this page uh we will use

some basic bootstrap so for including the bootstrap we need to include the CDN

so what I will do I will simply paste the CM just after the

title this is your bootstrap cdan and then we will actually have a very basic

button inside this container boot strap class you have this heading which will

say Google Drive mini clone and after that we will

have a very basic button which will say login with Google so we will have this anchor tag

and for now this anchor tag will simply say login with Google that's so it's a

very basic page that we designed now we just need to show this page when the user goes to the

so we can just route write this route and now to load this template we use response. render and just provide the

file name not the extension that's all so if you now go to the just start this

application so we are using a module node mod which will start your

application as you make changes

so if you open this application now so we can just open it Local Host

5,000 so you will see that template is loaded and it is actually showing this template so now we

need to actually do the authentication part here so for doing the authentication we need

to import that Google apis module like

this and from from this we are importing this Google method and now for doing the

authentication we do need to require the client ID and client secret

and just create a EnV file we storing these two information right here so you'll create two variables

which is first of all Google client ID and Google client secret so both this

information you need to create a Google Cloud console account and uh you need to

first of all enable the apis I have already in my dashboard so

just click the enable API services and here you need to select your API Google

Drive API and just enable this API before you make the project so I've

already enabled this so after this you need to go to credentials and then you

need to create the O client ID and the application type is web application and

here in the authorized JavaScript Origins you need to paste your url of your we actual website that you are

building so mine is Local Host 5,000 so I will simply paste

this and in the authorized redirect URL we need to I will customize this so This

is actually your call back URL so whenever the user is authenticated the user is redirected to this URL so this

you can name this anything I'm just naming it as o or2 call back so I will

Define this route in my Express app so for now I can click the create button to

actually get my client ID so you will see this is actual client ID this will

be different for you so just inside this EnV file just paste

your client ID and also you will get the client secret as well so copy that also

and paste it so after doing this now we just need

to load this two variables from the environment variables for loading this we need to import the module which is

EnV so just require this

module and then we just need to say EnV config it will actually load all the

variables from your EnV file

so now I will create the variables here Global variables in the in this file so

first I will call client ID so we can easily get using process. EnV and

whatever the variable that you call so Google client ID the second variable will be for the client secret so CLI

secret again we can get that using process. EnV and and Google uncore

client secret and the third URL will be for the

redirect URL so whatever redirect URL you you

actually given right here so in my dashboard so you need to give the same

URL that you gave at that location so o or2 call back

so now we have declared all these three variables the client ID client secret and redirect

URI now we need to actually make

a uploads directory just right here in the project directory here all your

files will get stored if you want to upload a file to Google Drive so first of all the

file will be uploaded using malter just create this uploads directory and now we need to

include some middle Wares so the first middleware we need to include right here using app.use is the body pass

middleware so we can express. URL encoded extended to false and the second

line is express. Json so these two lines are responsible because we are working

with forms because the user will be allowed to upload files so that's why we need to transfer

information from the form to express apps that's why this body pass two lines of middleware is required so just

include this and uh that's all I think that we need to do

right here and now we need to modify this Home

Route instead of loading this template we will first of all do the

authentication so for doing the authentication we need to generate the URL for that so we'll create a new

variable Au URL and right here whatever you call your o or2 client

I think we haven't created this to client so we need to now create the O client using

that information so you'll create a new variable so I will call this as o 2

client and uh I will instantiate a new instance of this Google do.

o 2 and here you need to provide all this three information client ID client

secret and the redirect Ur So now we will get our o client right

here you can see now we can simply use this client and this contains a method

in order to generate the URL so there is a method called as generate Au URL and it actually takes an

object which contains these two properties that you need to pass right

here first is the access type so this needs to be set as offline the second

option is the scope scope refers to which information that you are accessing from the API so here we need to

explicitly mention the scope so we will be requesting

the OD Drive scope so this enables you to

upload files delete files download files all the operations you can perform using Google Drive so this is a scope so we

are providing the scope right here so once you now we actually generate this

URL now we need to pass this URL to the template so we will render the template

but now you will pass this object and this object will contain this Au URL

so you can see we are entering the template but this time as the second argument we are passing this object which contains this all URL so we are

passing this

information so this needs to be same so I will say Au

URL so now in the index. ejs route we need to dynamically reference this this variable

that we are passing so right here inside your anchor tag in the hrf attribute we will

dynamically insert this variable so for doing this we'll be using the EGS syntax

like this and followed by the variable name that we passed so spelling mistake

must not be there you need to exactly type the variable that you passed like

this and I will give a bootstrap class let me say BTN BTN

primary so this will give it a blue color so also give it a class to The

Heading as well which is margin bottom 3 so if you check out your application now

margin bottom 4 you will see a button right here login with Google

so if I click this button you will be redirected to your actual Google account

that you want to select so once you select the account you need to Grant the permission right here click on continue

and now it will show you this error that you haven't defined your redirect URL so

we need to Define this redirect URL this is the same redirect URL you are uh the

user is redirected to this once they are authenticated we get this authorization code if you see in the URL we now need

to exchange it with the access token so now we need to Define this uh

route redirect URL so what I will do uh I will Define this

call back URL so app.get o or2 call back and right here

you will Define this route and here we can get our authorization code from request.

cy. code so now we can exchange this for Access token so we can say o or2 client

and it contains a method get token so here we need to pass your

authorization code as the first argument and the second argument will be a call back function here we'll be getting our

access token so now we need to save this token

in the session so for using the session in

Express we need to require a package for this so we can simply require at the very top so we need to pass it as a

middleware so this is specifically for nodejs and express application so I will

call this as session and we need to require this package which is Express

Express session so now we need to pass this as a middleware so for passing it

as a middleware we can use it right here at the very top so

app.use and we can simply say Express or we

can uh we can directly pass it as a

middleware yeah so we can say session and here it takes some properties so we

need to set a secret key this can be anything if you are developing it for production just make sure your secret is

uh very safe so for this example I'm just calling it as secret key and then

it has the second option is resave which is a Boolean parameter

so this is false save uninitialized let me set it to true so these options you need to

pass and then we have the cookie it will be an object and secure is false so this

if you are using on production https then you need make it true by default it is false so now we have set all this

information in the express session now we can easily save this access token in the session so what we can do

we can simply write this line which is request dot session and now the session

is variable uh session is available in the request object so we can make a

property called as token and we can store this token that we are getting access token in the

session so then we can redirect the user using the redirect function and we

can redirect them to the/ dashboard route for this we will be creating a new

page in the views folder so I will call this as dashboard. EGS so this will be the dashboard page once the user is

authenticated they will be redirected to this

page so I will simply give it a heading this is the dashboard so once the user

is authenticated now we just need to make this route app.get SL

dashboard and what we need to do we just need to load this template response. render

dashboard so what will happen now if you refresh now you will see it will be redirected to the dashboard route so

once you are authenticated you will see this dashboard route so once again if you click login with Google so now

automatically you will be redirected to the dashboard page so in this way we are

storing the access token the session and then we are redirecting the user to the

dashboard page so now we just need to make sure that we need to make this

route as protected route this dashboard because if if I just open this

application in a new incognito window I can still go to the dashboard

page without having authenticated so if I open Local Host 5,000 and again if I

in the URL just type SL dashboard I can directly go to the dashboard page

because in this way I am not authenticated so we need to protect this route for protecting this route we need

to write a function so this function will be responsible for checking if the

user is authenticated or not so I will call this function as is authenticated

so the pro this function will take the request

response and next middleware so it simply check that if the token is present in the session or

not so if request. session token returns true in that case the user is

authenticated then we need to set the credentials so set credentials and we

can set the token request. session. token and then we can say just redirect

the user to the route that they are requesting but if the if it if it

returns false if the token is not present in that case we just need to redirect the user to the homepage so you

can say redirect them to the homepage so now we need to pass this

middleware as as a middleware right here so in between these we can just make

this route as protected now any user going to this route will

get this function will get executed we will check so now if you go to that

again if you visit SL dashboard

now directly if you type this in the URL you will now see you you can't go to the

dashboard page you will be redirected to the homepage because you are not authenticated so in this way but here if

I go to SL dashboard I do need to do the authentication now and again you can see

now I am authenticated so in this way you can make your route protected so now what

what I need to do right here we need to actually make the dashboard page for

making the dashboard page we do need to retrieve the files from the Google Drive so right in this route SL dashboard you

first of all need to get the number of files from the Google Drive for doing

this we need to call the Google Drive API so Google Das drive and here we need

to specify which version we are using so we are using the version three and Au

here we need to pass over authentication client as the second argument and now we

have authenticated so right here we need

to use the API so this drive it contains the files list function so here we need

to specify how many files we want to return in the page size so we need to return the top latest 20 files and the

second argument is the fields so which Fields you want to return specifically will specify here so I want the ID of

the file name and the MIM type so you can see we have explicitly

providing which fields that we want which is ID of the file name MIM type which is extension

so after you provide this this will actually return a call back function

right here so put a comma and this will return

your all your files it will contain in the response so this is a call back function

and we can console log the response it will contain a data property

which will contain the files so if I just uh do this again go to the

dashboard page if you check the console you will see all the files will be returned top

20 files will be returned to me this is actually an array of objects each object

contain three properties which is a MIM type ID and the name so all the properties that we mentioned right here

are returned to us the top 20 files from my Google Drive now what we need to do

we need to show this files in the browser for showing it we will render reender the template by using the render

function dashboard and this time we need to pass this data to the template which is

files and file property which will say response. data files so I will delete

this line so now we are passing a property called as files this will be an array

here now we need to go to dashboard so again we will be using

bootstrap so just include the CDN after the

title so I've included the bootstrap CDM so right

here we will display all the files in the table so we'll be using some bootstrap

classes we'll align the heading in the center position which will say Google

drive file viewer I will simply call this

and right here we will use some bootstrap class

bootstrap is not necessary for this tutorial I'm just using it for styling purposes so I will not explain

bootstrap so I will just have a heading which will say the Google files in

Google Drive and then we will have a simple table where we'll be showing this data so

so so you giving some bootstrap table

striped so you'll have the table head tag so inside this we will have two

headings which will be the file name and the second column will be for

actions which will contain the download button delete button so just after this table head tag

we will have the table body tag and inside this we will Loop through we will

use the for each Loop so files for each and for each file we will

be so just need to surround these brackets because this is a syntax of EGS

just make sure that you put these brackets and in between these we will

display the HTML so here here in the TD tag First Property will be

the the actual name and we will making a hyperlink as well so in the TD tag we

will have anchor tag and here will be putting the name of the file which is uh file do

name so in this way we can put variables inside HS so right in here we need to

make it hyperlink so what we will do

we will make it as a hyperlink like

this so this is a syntax of the actual link of the Google Drive drive.google.com file /d followed by

here we are putting the actual ID of the file which is file. ID dynamically so if you refresh your

application now so you will basically see all the f

will get displayed right here you can see that these are the latest files in my

Google Drive so all these files have been

hyperlink so you can

see so you can open this actual file here this is a TST file you will see

that so now we are displaying the files right here from my Google

Drive so in the actions here in we have the second column for the actions which

will actually contain the buttons for downloading the file deleting the file

so we will have these two buttons in the second column so we again have anchor tag this button

will be for download the second button will be for delete

so for the download we will make the route here so I will what I will do I will copy

this so here we need to make a new route SL download and we are basically

embedding the file ID and similarly for deleting we will

have a simple form which will be responsible for deleting the file so in this way if I can just format

the document so you can see we have a one button for download the second button

will actually contain a form we'll make a simple post request so here SL delete

slash the actual ID of the file so if you just refresh your

route so you will see the two buttons will be displayed the download button and the delete button so if I click the

download button you will see it will say cannot get we need to make this get route so you can see dynamically the ID

of the file is passed in the argument in the URL so we need to make these two routes

for downloading and deleting so what I will do I will simply move my to my

express code so for downloading it this will be

a dynamic route so app.get SL download and here we

need to specify the file ID that we are getting as Dynamic parameter I'm just

calling it as file ID so again this needs to be protected

route so I will just use the middleware is authenticated the user must be authenticated to download the

file so here now to actually fetch the file ID

we will use request. params which is a very basic way in Express to actually

get the parameters from the URL so now after getting the file ID

it's very easy to download the file in Google Drive we will use a function in

this SDK Google R drive again here we need to again

specify the version and the O client so writing the same line

so here we have the function drive files get and here we need to specify the file

ID which is the file ID that we got and the

fields so what fields we are specifying the

name so we are passing two things right file ID and the fields so we only need

to get the name of the file so this returns again a call back

function so it will return the name of the file

metadata I will just call this as metadata

response so it will return your file name inside this metadata response

variable we will have the data and the name of the file returned to us

first of all we need to find out which file the user is uh just downloading so we are actually

making the first request to find out the name so this will be file name will be

returned to us now using this file name we will fetch the content of the file we

will make a second rest call to the API F uh Google Drive API this is a get

method which is available so here we need to specify y first of all the file

ID so we pass the same file ID that we got and the second parameter here we

need to pass is alt parameter so here we need to download the file that's why we are providing

this as media and the second thing that we need

to pass put a comma the second object is the response type so here we need to

stream it because we are downloading it that's why we are provided stream so again put a comma this returns

a call back function so error or file

response it's a call back function so now to download this file as an

attachment we can simply do this inside Express by first of all setting the

headers these two headers we need to set which is content disposition

so here we are simply setting the headers which is content disposition to

be attachment and file name is the actual file name that we retrieved and then we can simply use the

pipe method file response. dat. pipe and

we will pipe the response so this will simply download the file as an attachment so what you will see if I

reload the page click the download button uh can

download any file let me click download so what will happen you will see the file will get downloaded this is a txt

file so the file is opened you will see very easily so in this way you can even

download a image file as well so this is the image file so this also get

downloaded you can see it's a JPG file so in this way the download button is

working now I will will come to the delete button as well delete if you press it you will see cannot post again

it is passing the file ID but this time this is a post request so now we need to

make a post request for the delete operation so here this will be very easy

because here we are passing the file ID that we want to delete

so now for the delete delete button we will make a post request so just after

the download here so we so this is our code right

here so this time this is the post request so you'll say app. poost and here slash delete followed by the

parameter that we receiving which is the file ID colon file ID this will also be

a authenticated so we are passing this middleware request

response so here we need first of all fetch our file ID Again by using

request. params do like this so then again we'll be

writing the same line we need to specify so any operation that you

perform you need to write this line so specify which version that you're using and pass your o client after that this

there is a straight method in Google Drive API which is the delete function so Drive files. delete this will delete

the file which will have this file ID so we are passing the file ID right here so this returns a call back

function so this will delete the file and here you can simply show a

notification that your file is deleted file deleted and then we can

refresh the browser as well so you can simply redirect again to the dashboard page this will actually delete that file

and refresh it in the table as well so that's all so if you again now go to the

page so let's suppose I want to delete this txt file so if if I click

delete so you will see that file will get deleted and we will also get a message

that in the console if you

check okay so the we are redirected back to the that's

why that message so the delete function also working so now we'll come to the

upload part part so if you want to upload a file to Google Drive this operation is little bit

complicated but I will try to teach you in a very easy way so first of all for upload purpose

we do need to upload the file to the express server for doing this we need to

slightly do the configuration for molter so right at that very top we need

to import the molter package so just require

it then we also need the file system package which is a built-in package in

nodejs so we are requiring both these packages and then we need [Music]

to write the molter part if you use

molter we just need to tell which we

where the molter

will upload the files so for this we just need to add this line this line

will exactly tell molter where to upload the file so we are simply passing it in

a property in the object destination so here we are simply telling we have

explicitly made a uploads directory so up molter will first of all

upload this file and then it will upload to Google Drive so now for making this

uh we need to update this dashboard route we need to include a form where we

allow the user to upload a file in right just before the table we can include a

simple form uh

write yeah after this heading we can have a simple form

just inside this so you can have a form the action

will redirect the user to/ upload and we make a simple method will be post and

encoding type multiart form

data so inside this we will have a simple input type file and we giving a name

parameter as well file class will be form control it's a bootstrap class and it should be required then we'll be

having a simple button which will say upload

file and the button type here will be of submit class will be BTN BTN

success so if you refresh now you will see a simple form appearing so you can

see choose file button is there so I think it is slightly looking

uh so what I will do I will simply paste it I think we are just done some typo mistake in HTML so all the source code

is given in the description so if you paste you can now see the interface is looking quite good we have the choose

file button where as I choose the file let's

suppose I choose any file click on upload file you will see it is saying this message cannot post SL upload so

now we need to make this post request right here I can make it in

my so write a very simple post request app. poost SL

upload so for this upload operation first of all now we need to use that

middle we this will also be a is authenticated again we need to pass

because only authenticated users can upload the file to Google Drive and then

the second middle we which will be the malter one so we need to upload a single

file so we are actually passing two middlewares first for authentication then is it's a malter one so it contains

a function single to upload a single file and then it will be a call back

function so again we need to tell which version of Google Drive that we again we

to paste the same line pass your authentication

client then here now for uploading the file we first of all need to specify the

file metadata object which will actually contain the name of the file so whatever

name we can easily get using request. file. original name so malter provides

with this property so whatever is the original name of the file it will be given as the

name so now we need to specify the second object which is the actual media

so we will actually read this file by the file system module it contains a

function called as re create read stream and here will be passing the path of the

file which malter provides us with request. file. paath

so then we have a straight format method in Google Drive API to upload a file so

we simply say drive. files. create function we'll use this function and

simply here we need to pass an object which will contain these three properties which first of all we need to

specify the resource so it will be the file metadata object the second property is the media so the media will be

actually contain the actual file so it will read the binary content of the file

and the the third property is the fields so here it is just telling to the API

that uh after the file is uploaded we need to return the ID of the

file so that's all and then a call back function will be returned so it will be

error file so then you can simply show a notification to the user that the file

is uploaded and then again we can redirect the

user we can refresh the page so that's

all so now I can test this out and if I go

to the page

so it is giving me this error that cannot access is authenticated before

initialization uh just wait I just need to move this is authenticated function

at the top so just move this code right just before

this just paste it here because it must be declared before you call this so just

make the slide change and now the application will work so if you click the now we have this uh form right here

where we allow the user to upload the file so if I choose any file uh let me choose this image file JPG file and

click the button upload file so what will happen it will upload the file to

the Google Drive and then it will refresh the page so this is a newly uploaded file and if I click the link we

will see the file has been successfully uploaded we have got the link as well so

in this way you can see that we can either download this file as well by

clicking the download button and we can even delete this file

so if you don't need this file you can delete this so in this way using the

programmatically we are communicating with Google Drive API we performing both these four operations create read update

delete so in this way you can directly upload files download files

delete files so all the source code is given in the description of this video so thank

you very much for watching this video and do check out my website as well free mediat tools.com which contains

thousands tools regarding audio video and MH and I will be seeing you in the next

video