How to link your React application with Google Drive API (V3), list and search files

Lets say you have been tasked with a project that requires you to give a user the ability to select files for some processing to be done on them. The user can upload a file from their computer or choose a file from Google Drive or Dropbox.

Enable Google Drive API.

Go to your Google Developer Console, enable the Google Drive API and create an API KEY and an OAuth 2.0 Client ID. Incase you have no idea how to do this, read this article, I will wait for you.

Create a React application

Open your terminal and create a React application using this command. If you have a React application skip this and move to the next section.

npx create-react-app react-google-drive-tutorial

Install gapi-script from npm

This package will load gapi scripts and initialize some functions. This is how the package works:

1. Gets the js code from Google API Platform.
2. Adds it to a file .
3. Exports the file as module called gapi.

This can be done using the following commands:

Yarn

yarn add gapi-script

NPM

npm install --save gapi-script

Then import it

...
import { gapi } from 'gapi-script';
...

Place client ID and API Key in the env files

Remember the OAuth 2.0 Client ID and API key I asked you to create earlier. This is the time to use them.

In your .env files, add the following variables

REACT_APP_GOOGLE_DRIVE_API_KEY=your-google-drive-api-key
REACT_APP_GOOGLE_DRIVE_CLIENT_ID=your-google-drive-client-id

Remember that .env files should not be tracked by git as they contain sensitive information that in the wrong hands can be catastrophic, so ensure that they are part of the .gitignore file.

Add Discovery Docs and Scopes

// Array of API discovery doc URLs for APIs
const DISCOVERY_DOCS = ['https://www.googleapis.com/discovery/v1/apis/drive/v3/rest'];

// Authorization scopes required by the API; multiple scopes can be
// included, separated by spaces.
const SCOPES = 'https://www.googleapis.com/auth/drive.metadata.readonly';

Initialize the client library

Have a button that the user will click in order to choose which of their google accounts they want to connect with your application. This button will have an on click handler which will call the handleClientLoad function like so

onClick={() => handleClientLoad()}
const handleClientLoad = () => {
  gapi.load('client:auth2', initClient);
};

My button looks like this

If it is the user’s first time linking an account with your application, they will see the following screens in order:

1. Select an Account

2. App isn’t verified

As this is a tutorial, I did not verify the Google app. When deploying to production, ensure the app is verified. You can read on the process of verifying the app here.

3. Permissions

4. Confirm

List Documents

Once the user has given your application access to their Google Drive, you can proceed to fetch the files and display them in a table using the list function provided by the Google API. This list takes in certain arguments such as:

pageSize: This is the number of records that will be returned. Partial or empty result pages are possible even before the end of the files list has been reached. Acceptable values are 1 to 1000.

orderBy: A comma-separated list of sort keys. Valid keys are ‘createdTime’, ‘folder’, ‘modifiedByMeTime’, ‘modifiedTime’ etc. Each key sorts ascending by default, but may be reversed with the ‘desc’ modifier e.g.

usage: ?orderBy=folder,modifiedTime desc,name.

pageToken: The token for continuing a previous list request on the next page. This should be set to the value of ‘nextPageToken’ from the previous response.

q: A query for filtering the file results. You can view more search options here.

You can read more information on the list function can here.

Search for files

Would a list of files be any good without the ability to search?

I have implemented a search with a debounce time of 500ms to avoid hitting the endpoint every time the user enters to removes a character from the search input.

The value from the input is then concatenated with the name of the field I want it to search by (query_term) and an operator as shown below:

The concatenated string is then passed to the list function as an argument.

...
.list({
  pageSize: 10,
  fields: 'nextPageToken, files(id, name, mimeType, modifiedTime)',
  q: searchTerm,
})
...

Sign Out

The user should be able to sign out.

Conclusion

The Google Drive API is really vast and has a lot of functionality that you can leverage when building your application.

Read more about it on their docs.

This code is also available on Github.