An all-in-one react wrapper around Google's drive file picker. Supports direct downloads & blob exports.
🏠 Homepage
yarn add react-driveor
npm install react-drive- 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
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
A react element/node to handle the triggering of the picker. Use the injectOnClick prop to determine how the trigger is made clickable.
The client id you created above.
The API key you created above.
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.
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] }
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)
}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.
default: true
Allow the user to select more than one file.
default: true
Should react-files download the selected files to the browser as blobs.
default: true
Should react-files inject the onClick event handler directly in the provided child. Fallback is a wrapper container with the handler.
default: false
Download the selected files automatically to the user's machine after the picker closes
default: true
Allow the user to browse shared drives to select files from.
An array of allow mime types, to restrict the files a user can select in the picker.
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>
);
}
}
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>
);
}
}
👤 Alex Gurr
-
Website: https://www.alexgurr.com
-
Twitter: @alexgurr
-
Github: @alexgurr
Contributions, issues and feature requests are welcome!
Feel free to check the issues page.
Give a ⭐️ if this project helped you!