Build a Google Drive File Manager with React & Google API to Upload, Download, and Manage Files

uh Hello friends welcome to this video so in this video we will look at how to build out a very simple application

which interacts with the Google Drive API in react CHS so in this application

we will retrieve files from the Google Drive we will also be able to upload

files download files delete files all the four cred operations so this is actually the application demo that you

can see on your screen we are running it locally interacting with the Google Drive AP and we have a login with Google

button so first of all we need to authenticate with the Google we need to

login with it so once I click this button I will be redirected to a screen and uh you will basically see all

the files will be fetched you can see these are all the

files which are from Google Drive you will see that so if I click any of these

individual files you will see these file has been uploaded on Google Drive and uh we also have a upload file

form as well where you can directly upload files and if you see these two buttons appearing it's a download button

and delete button so if you want to download this file from Google Drive you can click the download button and now

your image has been downloaded and it is shown if you want to delete this you can simply click delete button and now that

file has been successfully deleted and if you refresh that you will see

the file will not be there so file is gone so it is basically whenever you

load the application we are showing the top 10 latest files which are there on your Google Drive and we displaying it

and if you want to upload a file you click the choose file button and you select your image file or any video file

any extension file and then click on this upload file button so once you

upload you will make a simple get request to the API and you can see the file is uploaded and if you click the

file this is the link it gives you when the file is uploaded so we will

basically perform all these four operations upload fetching delete download each and every file so now to

get started I will show you the modules that we are using so first of all we are using this module react Google login so

it's specifically for react chairs if you show you the

modules that we using right here uh we have different components here this is

the authentication plugin uh this is module so we have this react Google login this

is actually the module that we are using for in interacting with and then

we are also using uh this one this module which is uh let me show

you Google API G AIP

script so it is actually package to load the Google API script and some functions

so it has very popular module 65,000 weekly download so we are actually using these two modules apart from that for

building the interface we are also using uh react bootstrap which actually allows

you to integrate bootstrap components specifically for rea it has got almost 1

million downloads so so these four packages so let me just show you how to

install these npmi react Google login and then we have GPI script react

bootstrap and also the base package of bootstrap as well so these four packages are

required so just install this I've already installed these four packages so what I will do I will start this

application and I will delete everything and start

from scratch so I will delete this components folder as well so just create

a blank react Chase project and we have this so we'll basically create the functional component so if you just

refresh now uh it will hot Auto reload and you will see this app right here so

now to get started here we just need to declare some variables here first

variable will be just make it Global so that it accessible in all the program so

first of all we need to have the client ID so this information will be coming from Google Cloud console so you do need

to have a account inside Google Cloud console create account and then you need

to create you need to enable the Google Drive API inside enabled apis and

services just go to it and just search for this API which is

uh Google Drive API just you can search for this

API so I have already enabled this API so once you click enable you will just need to click

enable button and then go to manage and then you need to go to the credentials options and just create a client ID so

inside this create credentials just select this option o or client ID and in

the application type you need to select web application and here in the authorized JavaScript Origins you need

to paste the URL of your homepage so my URL is Local Host

5173 I will copy this URL and simply paste it in the authorized JavaScript

Origins and also in the authorized redirect urri also need to paste the same

URL and you don't need to write this trailing slash here

just and then click on this create button so once you click the create button it will give you your client ID

this is will be your client ID and uh you need to copy this and

simply paste

it so this will be your client ID and

uh let me previously delete the client ID that I

created and also for this uh application we also need the API key as

well so right here inside cre credentials you will also see this option API key you need to click this

option it will give you your unique API key so don't copy my information I will delete everything after this video so

just create your own API key and client ID simply you need to copy to

clipboard so you can store this API key globally it's totally up to you how you

need to do it so I will just make another variable

which I will call that API key and store this

information so now we have two variables we are storing this client ID and API key and now coming back to the

application uh in the app we need to have four variables first of all we need to keep

track of the authenticated user so we will have this variable is authenticated

and set is authenticated initial value will be U State we use the US state hook

and it will be false because the user is not authenticated when you load the application for the very first time so

it's a Boolean parameter just signifying the user is not authenticated and then we need to have

the files variable set files so this will be initially will be empty so here

we'll be storing all the files which we will fetching from Google Drive initially it will be empty then we will

have the variable for setting the error so this error message initial value will

be nothing so no error is there and then we have the variable for keep track of

which file is selected by the user so set selected file so which file they

want to download delete so for that also by default null will be there so we

have declared all these four variables to keep track of it in the

application using use state so now we need to basically

load the Google API client when we load the application so

you will have noticed a use effect hook which you perfectly know whenever you load the application use effect you can

definitely use in react CHS if you want to do something at the time of

application so this will execute for the very first time so here we can load the API so we can simply

import first of all the Google API and this will be imported from this

module that we installed Google API script so inside this use effect we can

load this so it contains the load function and here we can load the client

the oo client and then we can initialize this

function init client this will be a custom function that we need to write so inside this function init client we will

actually be loading the user information such that we need to load the client for

loading the client we have this function inside this init function and here we need it makes an object where we need to

pass all the properties that we configured such as the API key client ID everything so here we need to first of

all pass the option for API key we can pass the variable that we set

which is the API key the second option it is is a client ID so the client ID we also configured

which will be just make sure that you write the variables in exact case right here so if

you do make it capital it will give you error and then we need to pass the client ID right here and then we have

the variable for scope scope is actually what information you are accessing from

the Google Drive API so scope we all we want all the Scopes so we will just

write the scope which is https wwwg googleapis.com

o/ drive and then we have the variable for Discovery

docs this will be a array and here you actually provide the URL where you will

be making these rest API calls so we just need to provide this so just HTTP

googleapis.com Discovery version one apis drive version 3 rest so you just

need to write this exactly what I am just written this function will get executed

that's all that we need to do right here and now we need to have to write the jsx

for impeding this login with Google button inside your application so right

here we also need to import react bootstrap and we'll be

using the container class so it will automatically get imported if you see container from react

bootstrap so we are using the bootstrap and the class name here will

be you will attach a bootstrap class which is and then we will have a simple

heading which will simply say Google RI C example we will align this heading

in the center position so if you just refresh now you

will see this heading but we do need to import the CSS file as well or bootstrap without that it will not work

so bootstrap dis CSS bootstrap m. CSS so the base CSS file of bootstrap so

now it will align it in the center position so after this we need to in the jsx we do need to have a condition that

inside curly bracket is authenticated we have the not sign this simply means that

if the user is not authenticated in that case we need to show the login with Google button so we have this variable

right here if you see initial value is false so now the user

is not authenticated in that case we do need to show you will have a tary

operator and we will have this colon here so this simply means that if the

user is not authenticated then we need to show the login with Google button so

we'll need to create a components folder in the source so we create a components

folder and here we'll be having a o component o.

jsx so we will basically make this o we'll import

that and this components will take four properties we will basically pass first

it takes the client ID we will actually pass the client ID that we have then it

takes uh on success function and here we will Define

all these functions handled login success this function will get called whenever the user is automatically

logined on success and similarly we have the function for on failure if any sort

of error take place then we will write the code for that handle login

failure and the that's all that we need to have so now we need to Define these

functions right here which is handle

right here we can Define

that similarly we need to Define handle login failure as

well so we Define these two functions and if the user is authenticated in that

case we need to have the component which will be

file list compon component we need to show the total files again we'll be creating another component here which

will be file

list so now we have this condition right here uh if the user is not authenticated

then we are showing the login button with this component and we are passing these three properties if the user is

authenticated then we are showing the files so we will do this so first of all

we need to tackle this uh we need to write these two functions which is handle login success and handle login

failure first of all we need to actually write this component which is the Au

component so this component will takes uh you will see as we pass these properties client ID on success and on

failure so these three properties we are passing to this component so now what we

need to do we need to write the J X part of this so we'll basically embed the

Google login button which will be coming from react Google login automatically

imported so this come this module takes four properties first is the client ID

we have the client ID there secondly it takes the button text so whatever label

that you want to do I will say login with Google on success it takes we are

having this function on success and on failure is on

failure so it takes four properties and also it takes two additional properties

which is Cookie policy and here we need to Simply say single host origin just

set this property write this and the scope which scope that you are providing

so you again need to give the same scope right here googleapis.com

5

five so this is actually a scope and after you do this uh you will

see a login with Google button appearing you will see that we have this

button so once you click this button you will be redirected to this account screen where you will select your

account and then you need to Google hasn't verified this app but uh if you

are doing it in your own Google account if you see any kind of error uh then you

need to actually add this email address to your test user so what you need to do you need to go to this option oo consent

screen and then you you need to add this email inside your Google Cloud console

account because they provide you with this test users I've already added this

these accounts right here that's why I can test this application this is because your application is not accepted

by Google so you need to accept test users we need to add these test users by

clicking this option and just add your email address and save it I've already done that so that's why I can run this

application from this email address so after this we need to write these on

login success and on login failure method just go to

and Define these methods so this method will be responsible for getting the access

token once the authentication is completed so handle login success so here we will first of all set the

authenticated from true we will change it the status of the

user from false to True secondly we need to

basically get the Au instance so this is provided by this

module and we will need to sign in so like the user will sign in by this

method and instead in case of any error we will

set the error message that is failed to authenticate

with Google so that's all that we need to do and if you refresh

now click on continue and just allow the

permissions so you will not see anything you you will not see that login button

because you are successfully authenticated so now I will make a

function list files this function will be responsible for fetching all the files from your Google Drive the top 10

files latest files this function list files so I will just Define this function so it will get the latest 10

files from your Google Drive and display it in the browser so

list files it's a call back function so here

first of all we need to get the access token we can create a variable right here and then we you can simply

say in this way you can get this this module provides a function called as get

token and we will get the access uncore token this here you need to pass this

access token in each of API call we are getting this access token now we can

actually use the fetch API and we will fetch the files from this URL https

googleapis.com Drive version 3 slash files and here we need to pass the

property page size so page size simply means how many

files you want to retrieve so I want to retrieve the top 10 files latest files

and here you need to include the fields such as we need to have the ID comma

name and the M type of the files so you will write like this and then it takes

an object here we need to pass the method it's a simple get request and

here we need to pass the access token as the headers so we pass a header object and we simply pass the authorization

header like this and then we have the beerer in this way we pass the access

token and you embed your access token so after that it returns a promise

we can handle this using dot then and we will get the

response and if the response is not okay in that case we will throw a

error that fail

to uh let me

just so if any sort of error take place we will be basically return a

message fail to fetch files from Google Drive if all the things is successful

then we will simp simply return the response in a Json then again it will

actually we can handle this using dot then and we will get our data and then

we can console log the data and also set the files using the hook function

whatever data do files so if you just refresh now uh you

will see inside if you click this after successfully

login you will open console you will see an object will be returned to you this

object will have the files top 10 files is returned to you so if you open this

object you will see each file has its own property name type the ID so we just need to Loop

through all this and display it in the browser so we have these top 10 files appearing from my Google Drive so now to

display these files uh we need to go to the jsx

option and inside our component which we created file list we need to pass this

uh first of all this function to this component so file list component we need

to pass the total files which will be Loc in the files variable so now we need to open the file

list component and uh inside this component we are passing the total

number of files which we need to which is available in this files

variable so now we need to Loop through so inside the jsx what we need to do we

need to use the list group component of bootstrap and inside

that we will move through we files map for each file we need

to have the list group [Music]

item and here we'll basically pass an key parameter which is required if you

are working with map we will pass the file. ID which is unique every time for every

element and inside this we have the row component for bootstrap and we'll basically give it a

class name of align these items in the center

position and now we have the column component of bootstrap and we will

display the hyperlink so this

hyperlink we will have https drive.google.com f/t

and then here we need to paste the file ID which will be coming from the this

variable so this needs to be uh template string so just make sure back teex

symbol is used and here you need to embed your Dynamic

ID and slash view so this will be your anchor Tab and here we do need to

pass it should open in a new window so Target

blank and we need to basically pass a name as well so the file name which will

be shown file. name so that's all uh if you refresh

now you will see the total number of files which will be displayed

uh uh let me see uh file this component we are displaying

uh we're calling this function which is list

files just wait let me see what is the problem uh guys the error was really

simple I I was not included the module that the file list component we weren't

including that was the error so you just need to import this component using this

import statement I was not doing that that's why I was getting that error and now if you just include that component

and again click the login with Google button you will see the top 10 files from your Google Drive account will be

displayed and you can see that you can individually click them and you will be redirected to the actual file

so now we need to show the buttons as well for actually

downloading or deleting these two files side by side so now we need to

show these buttons so we just need to

modify the jsx for this so right inside your

component uh file this

component we will be passing the functions which will be

responsible for downloading we'll pass a second attribute download file and

delete file so these two additional attributes will be passed just make it

this change right here and WR in the jsx

after this we will side by side we again have a another

column component and we will be giving some bootstrap

classes to it deflex and it will have a gap of

two so two buttons will be shown so the first button which will be for download

and then the second button for deleting so we will have

these two buttons uh we just need to give some classes to this so This

variant will be of

primary and we will also be binding a on click so when we click these buttons we

will execute the function which we are passing which is download file we will

pass ID of the file so file. ID and then we'll pass the name of the file as two

arguments to this function which is download file and same goes with the

delete button so this time the variant will be of danger and we will also be binding an on

click so when you click the delete button you'll be calling this delete file method and we passing the file ID

and the file name so we only need to pass the file ID for delete we don't

need to pass the name of the file so now we just need to make this change in the app here we are calling

this file list component and we need to attach these two functions first is the

download file and we need to Define this function right in this component so delete file

so these two functions we need to Define uh right here so we will Define these

functions function to download the file so you simply have

a function so this will be for responsible

for downloading the file

and so this let me just see what is yeah

so here we are accepting the file ID and the file name as two

arguments and same we will make another function this time for deleting so you

simply say delete file and here we only be accepting the file ID if you make this change you will

see these two buttons appearing uh uh download and delete right side by side

so once you click the button nothing happens because we do need to write the code for this so for for downloading the

file from the Google Drive you need to make a post request so here again you

will need the access token you will simply get the access token by again this

method so after getting the access token now we can use this access token to make

a fetch call so with this URL Google aps.com

Drive version 3

files so you again need to use the backtick symbol you need to dynamically paste the file ID so here we will paste

the file ID we will say file ID and then for downloading you need to

add a special attribute right here question mark and then you need to say Al is equal to

media and then you need to pass an object right here we need to pass the

access token as well again use the authorization

header b error and then the access

token so this will actually return the Promise by dot

then so again we can have a if statement

if the response is not okay then simply say fail to download the file if the resp response is okay then we need to

convert this into a blob you can simply say return blob response blob we'll

convert this to a blob so that we can download this so again it will return the promise we can handle and then we

will have this blob and now we just need to download the file so for downloading it we need

to having this blog we will use this blob you have this function create

object URL pass the blob and then we will create the anchor element this is a

very standard way if you want to download any file in the browser you create this element

dynamically which is the anchor element then we need to set the file

name and thef attribute so we say that link.

download file name whatever is the file name

so this we are getting it this variable file name

so then we need to add this element we simply say document body append child

and we will append this link and then click it dynamically link. click and then remove it after clicking

it remove Child Link so this is all that we we need to

do and uh we have this URL and sorry we

haven't you also need to do link. HF the exact URL that we need to download so

that's all and if you test it out if you want to click the download

button so if you click the download button now you will see the file will get downloaded so this is the exact file

that you see now we need to do the same thing for the delete as well and if I

click the delete button I need to delete the file so for deleting the file it's

really easy we will again need to pass the access token so I will simply paste

that so access token again we'll be getting and then again this time we will

again make a fetch call and the

URL will be the same here so/ Drive version 3/

files just make it actic symbol so that

we can use the ID here the request slash files and then you need to provide the

ID that you want to delete so again it takes an object this

time the method again will be post sorry this time this will be delete method so method is

delete and again we need to pass the headers which will be the

authorization which is beor and then you paste your access

token so this will actually simply return the response here we don't need

to display anything so if the response is okay then we just need to refresh the

list so if the file is deleted successfully then we need to set the files

again previous files we just need to delete this file so previous

files do filter and the actual file we need to remove it so file. ID is not

equal to the file ID that we call

so essentially what we are doing we are deleting this file from the files array that we have using this uh filter method

which is available in JavaScript so if any sort of error take place in the else block we can show a error

message that fail to delete the file that's all so if you refresh now uh

and click the delete button so you'll see that file will be

deleted and so in this way you can delete the file as well so now we will

look at the operation to upload the file to Google Drive so for uploading file we

need to create a separate component so just go to the components folder and just create a separate one which is file

upload jsx and you have again a functional

component so now we need to include this

component in the jsx so right

here before the file list component we will have the file upload to show a

simple form to the user

so here we'll be passing four things to this component first is the selected

file we will pass this variable that we have so which file is selected by the

user and then we have the set selected file this will again be this variable

set selected file the actual function which will be responsible for the hook function and

then this function upload file this function I will create this will be the custom function to upload the file to

Google Drive and this list files this again is the function that we created to

actually get all the files from Google Drive the top 10 files so we are also passing this function to this one so to

refresh the list so these four properties we are passing so now we need

to define the upload file function so right here if you see

function to upload the file so we have this function upload

file so in the file upload component if you

see uh we are basically passing these four properties first is the selected

file then the function to actually set that selected f file the third function

is upload file function and the fourth one is the list files function so

all these are functions these are the actual variable so now in the

jsx we will be having the div tag which we will be including these bootstrap

classes

so inside this we will have the simple form user form so form

control so inside this uh basically this will be a simple

input where we'll be accepting the user input type file you binding an on change

so when the file is selected by the user we will use this function which is pass

set selected file and we'll basically be passing the file which is e. Target

files so whatever file is selected by the user we are setting this and then we also have the style

property we giving the max width property to be 300

pixel so after this we will have these two buttons uh first button to be upload

the file so we will have these two

buttons so this button will be for uploading the

file so the variant here will

be success and we'll be binding an

onclick listener which will be upload file so when you click this button this

function will be executed and if you want to refresh the

list we will have the second button which will be responsible for refreshing the list so this list files will get

executed when you click the button so again if you refresh

now you will now see this form appearing the choose file button once you are

authenticated you will see this option to upload the file file as well

so now we need to make this function which is the upload file so once you

click the upload button now to upload the file we have

made this function which is this one so inside

this function for uploading the file it's

little bit complicated but still it's very easy so here we first of all check

if the file is not selected by the user then we will set the error message that

will simply say to the user that please select a file to upload that's all and

then we'll return we not execute the code and if the file is selected then we

need to get create a metadata object and here we'll be storing the name of the

file selected file. name inside this object file metadata and

then we need to create a form data this is a very simple way by which

you can upload files to the server we create this form data Constructor which is

available for every browser and it contains a method append so inside this

object it contains this method append so we need to append the information of the uploaded file so

first we be metadata you can call this anything so here we pass the blob

Constructor so you will basically use json. stringify to convert the JavaScript

object to a Json string and here you pass the this file

metadata essentially you're passing the name of the file the second object it takes as the type of the file so this

will be a simple Json file you just need to provide that and the second property

in the form data object we need to append is the actual file so the

selected file The Blob so these two things we need to append and now we need to pass this form

data object in the fetch API request you'll make a simple post

request SL upload SL Drive SL verion 3/

files and here you need to put a question question mark and then you need to say upload

type is equal to multiart this is the actual request we

are making and then it takes this we need to pass an object so here we the

method here will be post and then we again need to pass the

headers so here

authorization so beor and

here we can pass the access token once again so you can directly pass it

without storing it in a variable so like this and this time you also need to pass

the body as well because essentially we are uploading the file so we need to pass the form

data in this is actual body so just make this change right here yeah put extra a

so after this this will actually return a promise so we can handle this using

dot then first of all we need to convert this response coming to

Json again this will return a promise so you can use a DOT then so here your

response will be coming and then we can set the error message to nothing and again we can set the

selected file to be null just reset the form and then refresh the list so again

you'll be calling this method list files so that's all that we need to do if you

refresh the application now and click the button and uh if you want to upload a

file you will select your image file or any file that you want to upload click the upload file button so you will

basically see it will make the post request and your file will get uploaded and it will refresh and if you click

this and you will see the actual link of the uploaded file so the file is

successfully uploaded to Google Drive you can download This by clicking the download

button so this is your file you can also delete that as well so the file is

deleted so in this way guys you can make this Google Drive cred operations we can

create read update delete all the four operations we can perform using the Google Drive API inside react Chas so

all the source code will be given in the description of this video so thank you very much for watching this video please

hit that like button subscribe the channel and also do check out my website as well free mediat tools.com which

contains thousands of free tools regarding audio video and image and I will be seeing you in the next video