Up next in 10
React.js Google Drive & Docs File Picker API Example to Upload & View Files in Browser Using JSX
371 views
Jun 3, 2025
Get the full source code of application here: Watch My Visual Studio Code IDE Setup Video For Fonts,Themes & Extensions https://youtu.be/Bon8Pm1gbX8 Hi Join the official discord server to resolve doubts here: https://discord.gg/cRnjhk6nzW Visit my Online Free Media Tool Website https://freemediatools.com/ Buy Premium Scripts and Apps Here: https://procodestore.com/
View Video Transcript
0:00
uh hello guys welcome to this video so
0:03
in this video I'll show you a reactjs
0:05
library which allows you to integrate
0:07
the Google drive file picker uh API
0:11
where you can able to read files from
0:15
your Google drive or also directly
0:17
upload files to your Google Drive so
0:19
there is a button out there I'm running
0:21
this react CHS application locally we
0:24
have a simple button which opens the
0:26
file picker API which will do the
0:28
authentication first of all
0:30
or to authentication so here you need to
0:33
select your Google account then Grant
0:35
the permission for your Google Drive you
0:38
will see that it is allowing you the
0:43
permission simply click continue so it
0:45
will grant the permission and it will
0:47
now fetch all the files which are stored
0:50
all the
0:52
images and you can see that
0:56
so you also have the second option as
0:59
well to actually directly upload files
1:02
so you simply select upload and then you
1:05
simply select whichever file that you
1:07
want to upload let's suppose I select a
1:11
image file this JPG file that I'm
1:14
uploading right here you can add
1:16
multiple files as well so let's suppose
1:20
I have two images right here using this
1:23
file picker API simply say upload you
1:26
will
1:28
see you can even upload files as well
1:32
so but we can see the files right here
1:35
if you see if you individually select
1:37
any file you will see the file will be
1:39
returned to you inside an
1:46
object so now I'll be showing you how to
1:49
integrate this so there is a specific
1:51
module inside rches which is this one
1:54
react Google Drive picker this is
1:58
actually the module the command is very
2:00
simple to actually install this module
2:02
so once you install this let me show
2:05
you
2:07
uh just create a simple functional
2:17
component so now we first of all need to
2:20
import this module so for importing it
2:23
we use the simple import
2:25
statement use Drive picker and it will
2:30
be coming from this package so just
2:32
using this import line we simply import
2:34
the module and then we will have a
2:37
simple button in the
2:42
jsx and this button will simply say that
2:46
open picker and we will basically bind
2:49
an onclick listener to this so on
2:54
click this function will be handled open
2:57
picker
3:00
so now we just need to Define this
3:01
function so as soon as we click this
3:03
button we just need to Define this
3:18
function so right here
3:31
we will declare a variable here first of
3:34
all open picker
3:39
and or
3:43
response and this will be using the use
3:47
Drive picker
3:55
and this is just a function
4:00
so we declared this variable this is a
4:03
hook and right inside this function we
4:05
actually call this function open
4:09
figure and this actually takes some
4:11
options so here you need to specify the
4:13
client ID and then you also need to
4:16
specify the developer key and then the
4:19
scope so this scope basically grants all
4:21
the permission we can read upload
4:24
download delete
4:28
everything and then The View ID which is
4:31
Google
4:33
Docs local which is
4:36
English and then if you also want to
4:40
upload you can set this option to True
4:43
show upload folders show upload
4:53
files can see that so you can set all
4:55
these options
5:03
and we also have the option to
5:05
actually multi- select which allows you
5:09
to select multiple files and then we
5:11
also have a call back function which
5:13
will execute once you actually select
5:16
the
5:17
data so inside this function we can
5:20
actually have a action so if you
5:26
basically uh just click the
5:34
cancel
5:39
button this call Action will be
5:43
cancelled and we just console log all
5:46
the data that you selected now here in
5:49
this we just need to replace your client
5:51
ID and the API key so these two
5:54
information you will get inside your
5:56
Google Cloud console so just create a
5:59
simple account right here I've have
6:01
already created one so then you need to
6:03
go to library
6:05
section and
6:07
uh here you need to search for the API
6:10
that we are working with which
6:18
is
6:23
so just search here for Google
6:27
Drive you will see this AP will occur
6:30
Google Drive API so just you need to
6:32
enable this API I've already enabled
6:35
this simply enable that after that just
6:37
create a go to credentials and
6:42
just I've already created this API key
6:46
simply
6:50
paste and my reactjs application is
6:53
running on port
6:58
number if you see the application is
7:00
running by default it's running on Local
7:03
Host
7:05
5173 so this is your homepage simply
7:08
copy this URL and uh go to this option o
7:12
or client
7:15
ID application type will be web
7:17
application and authorize JavaScript
7:20
origin simply paste this
7:23
URL just don't
7:25
have also have this http
7:35
so you just need to add both the flavors
7:37
right here including the port number
7:39
also the HTTP Local Host and then just
7:43
copy this URL in the authorized redirect
7:46
URI simply
7:48
paste and then just click create it will
7:51
give you your client ID so I already
7:55
have the created this client ID so what
7:58
I will do I will simply copy
8:03
this so after you do this uh
8:09
just login with your Google account so
8:12
let me
8:15
open click this button and as soon as
8:17
you click it you will be redirected to
8:19
the screen right here where you will
8:20
select your
8:27
account just make sure
8:42
let me create it one second I think I
8:44
already created one that's
8:53
why just do this process once again uh
8:56
you set your application type to be web
8:59
app application
9:11
authorize just copy
9:15
this
9:19
paste and now it will give you this
9:21
client ID you just need this one and
9:24
just paste this client ID
9:30
so as soon as you do this just open your
9:33
application Local Host 5173 and just
9:36
click this button and now you will
9:39
simply select your account just gr the
9:41
permissions and automatically it will
9:43
log you in and you will see that you
9:46
have the screen where you can upload
9:49
directly your files as
9:55
well and now you can see your files have
9:57
been successfully uploaded so in this
9:59
way guys you can integrate very easily
10:02
the Google drive file picker API inside
10:05
your reactions application to upload
10:07
download files using this file picker
10:10
API window so thank you very much for
10:14
watching this video uh please hit that
10:16
like button subscribe to channel and
10:18
also check out my website free mediat
10:21
tools.com which contains thousands of
10:23
tools regarding audio video and image
10:26
and I will be seeing you in the next
10:28
video
#Cloud Storage
#File Sharing & Hosting
#Multimedia Software