React.js Google Drive File Picker API to Upload,Download Files to Drive in Browser Using Javascript

Welcome folks today in this blog post we will be using the google drive api to upload and download files to google drive using the drive picker in browser using javascript. All the full source code of the application is shown below.

Get Started

In order to get started you need to make a new react.js project using the below command

npx create-react-app sampleapp

npm i react-google-drive-picker

And after that you will see the below directory structure of the react.js app as shown below

And now you need to make an App.js file and copy paste the following code

App.js

import { useEffect } from "react";
import useDrivePicker from "react-google-drive-picker";

function App() {
  const [openPicker, data, authResponse] = useDrivePicker();
  // const customViewsArray = [new google.picker.DocsView()]; // custom view
  const handleOpenPicker = () => {
    openPicker({
      clientId:"##clientid##",
      developerKey:"##apikey##",
      viewId:"DOCS",
      token:"##accesstoken##", // pass oauth token in case you already have one
      showUploadView: true,
      showUploadFolders: true,
      supportDrives: true,
      multiselect: true,
      // customViews: customViewsArray, // custom view
    });
  };

  useEffect(() => {
    // do anything with the selected/uploaded files
    if (data) {
       console.log(data)
      data.docs.map((i) => console.log(i));
    }
  }, [data]);

  return (
    <div>
      <button onClick={() => handleOpenPicker()}>Open Picker</button>
    </div>
  );
}

export default App;

import { useEffect } from "react";

import useDrivePicker from "react-google-drive-picker";

function App() {

const [openPicker, data, authResponse] = useDrivePicker();

// const customViewsArray = [new google.picker.DocsView()]; // custom view

const handleOpenPicker = () => {

openPicker({

clientId:"##clientid##",

developerKey:"##apikey##",

viewId:"DOCS",

token:"##accesstoken##", // pass oauth token in case you already have one

showUploadView: true,

showUploadFolders: true,

supportDrives: true,

multiselect: true,

// customViews: customViewsArray, // custom view

});

};

useEffect(() => {

// do anything with the selected/uploaded files

if (data) {

console.log(data)

data.docs.map((i) => console.log(i));

}

}, [data]);

return (

<div>

<button onClick={() => handleOpenPicker()}>Open Picker</button>

</div>

);

}

export default App;

As you can see we are importing the react-google-drive-picker library and then we need to replace your own clientid and apikey and then we need to replace the accessToken and then we need to enable the google drive picker api. And now we have the button called Open Picker when user clicked a popup window will appear where user can select accounts and then user can upload and download files to google drive as shown below