An all-in-one react wrapper around Google's drive file picker. Supports direct downloads & blob exports.

🏠 Homepage

Install

yarn add react-drive

or

npm install react-drive

About

• Scripts are lazy loaded when the component is initially rendered.
• When the trigger is clicked we prompt the user to authenticate if a session is not already present.
• The file picker is shown
• Selected files can either be directly downloaded to the user's device, saved in memory as blobs or returned as drive file references

Prerequisites

You'll need two things from the google developers console. A client id and an api key. To get these you'll need a project with the Google Picker API enabled. Once you've created a new project and selected it:

console.developers.google.com > Dashboard > + ENABLE APIS AND SERVICES > Google Picker API > Enable

console.developers.google.com > Credentials > Create Credentials > OAuth Client

Part of this will be to create a consent screen. If you just want to test in development, you don't need to submit. Simple save and go back.

console.developers.google.com > Credentials > Create Credentials > API Key

Options

children node (required)

A react element/node to handle the triggering of the picker. Use the injectOnClick prop to determine how the trigger is made clickable.

clientId string (required)

The client id you created above.

apiKey string (required)

The API key you created above.

onEvent function(event, payload?) (required)

The onEvent callback is called multiple times during the picker lifecycle. The first argument is always the event type and the second argument is an optional payload that's included with certain events (see below). You can handle as many of the events below in your callback function as you need.

We provide the user's access key as part of the payload, in case you want to handle file downloading server side and don't want to have to go through the authentication flow again.

Events

CANCEL - When the user cancels/closes the picker without selecting any files

ERROR - When the picker throws an error

START_REMOTE_PULL - Only called when exportAsBlobs is set to true. Will fire just before we start pulling individual files from drive.

SELECTED_FILE - Only called when exportAsBlobs is set to true. Will get fired everytime a blob is resolved from drive.

Payload is { accessToken: string, file: blob }

SELECTED_FILES - The final event, called when all files are resolved. If exportAsBlobs is set to false, the files will be an array of drive doc objects, otherwise an array of blobs.

Payload is { accessToken: string, files: [blob | doc] }

exportMimeTypesOverrides object

In Google Drive, files are handled differently depending on whether they are a Google Document or an actual file. Direct files are downloaded as you would expect, with a preserved mime type.

Google Documents have to be mapped to mime types when they are exported. react-drive provides some sensible defaults but all of them are overridable. You can see the supported export mime types here.

{
  document: `string` (default: application/pdf),
  drawing: `string` (default: image/png),
  presentation: `string` (default: application/pdf),
  script: `string` (default: application/vnd.google-apps.script+json),
  spreadsheet: `string` (default: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet)
}

origin string

Sets the origin of picker dialog. The origin should be set to the window.location.protocol + '//' + window.location.host of the top-most page, if your application is running in an iframe.

multiSelect boolean

default: true

Allow the user to select more than one file.

exportAsBlobs boolean

default: true

Should react-files download the selected files to the browser as blobs.

injectOnClick boolean

default: true

Should react-files inject the onClick event handler directly in the provided child. Fallback is a wrapper container with the handler.

downloadSelectedFiles boolean

default: false

Download the selected files automatically to the user's machine after the picker closes

allowSharedDrives boolean

default: true

Allow the user to browse shared drives to select files from.

allowedMimeTypes [string]

An array of allow mime types, to restrict the files a user can select in the picker.

Examples

Server Side Handling

import Drive from 'react-drive';
import copyDriveFilesToUserLib from './api/copyDriveFilesToUserLib';

class SaveDriveFilesToLibrary extends Component {
  constructor(props) {
    super(props);
    
    this.state = {
      loading: false
    };
  }
  
  doServerCopy = async ({ accessToken, files: docs }) => {
    this.setState({ loading: true });

    await copyDriveFilesToUserLib({ accessToken, docs });
    
    this.setState({ loading: false });
  }
  
  handleEvent = (event, payload) => {
    if (event !== 'SELECTED_FILES') { return; }
    
    this.doServerCopy(payload);
  } 
  
  render() {
    const { loading } = this.state;
    
    return (
      <div className="library-copy">
        <Drive
          clientId="clientId"
          apiKey="apiKey"
          onEvent={this.handleEvent}
          exportAsBlobs={false}
        >
          <button className="">Select Drive Files To Copy</button>
        </Drive>
        {loading && <div className="loader" />}
      </div>
    );
  }
}

Local Blob Handling

import Drive from 'react-drive';
import copyDriveFilesToUserLib from './api/copyDriveFilesToUserLib';

class SaveDriveFilesToLibrary extends Component {
  constructor(props) {
    super(props);
    
    this.state = {
      files: [],
      loading: false
    };
  }
  
  handleEvent = (event, payload) => {
    if (event === 'START_REMOTE_PULL') {
      return void this.setState({ loading: true });
    }
    
    if (event === 'SELECTED_FILES') {
      this.setState({ files: payload.files });
    }
  } 
  
  render() {
    const { loading, files } = this.state;
    
    return (
      <div className="library-copy">
        <Drive
          clientId="clientId"
          apiKey="apiKey"
          onEvent={this.handleEvent}
        >
          <button className="">Select Drive Files</button>
        </Drive>
        {loading && <div className="loader" />}
        {files.length && files.map(file => <p>{file.name}</p>)}
      </div>
    );
  }
}

Author

👤 Alex Gurr

• Website: https://www.alexgurr.com

• Twitter: @alexgurr

• Github: @alexgurr

🤝 Contributing

Contributions, issues and feature requests are welcome!Feel free to check the issues page.

Show your support

Give a ⭐️ if this project helped you!