Welcome to react-drive 👋

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';

// This could be a file that sends an api request and uses the G drive node SDK to copy/stream files server-side
import exampleFileToTriggerServerCopy from './api/exampleFileToTriggerServerCopy';

class SaveDriveFilesToLibrary extends Component {
  constructor(props) {
    super(props);
    
    this.state = {
      loading: false
    };
  }
  
  doServerCopy = async ({ accessToken, files: docs }) => {
    this.setState({ loading: true });
    
    await exampleFileToTriggerServerCopy({ 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=library-copy__select-btn"">Select Drive Files To Copy</button>
        </Drive>
        {loading && <div className="library-copy__loader" />}
      </div>
    );
  }
}

Local Blob Handling

import Drive from 'react-drive';

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="library-copy__select-btn">Select Drive Files</button>
        </Drive>
        {loading && <div className="library-copy__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!

alexgurr/react-drive

ErrorLooks like something went wrong!

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors 2

Uh oh!

Languages

Error
Looks like something went wrong!

Packages