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