README
Drive Uploady
Provides a custom React Uploady for uploading to Google Drive. All Uploady functionality such as hooks and components (ex: Upload-Preview) can be used with this package.
Uploads are sent to the multipart endpoint: Google Drive docs.
Note: no support for URL based uploads, only files.
Installation
#Yarn:
$ yarn add drive-uploady
#NPM:
$ npm i drive-uploady
Props
Name (* = mandatory) | Type | Default | Description |
---|---|---|---|
clientId* (unless gapi instance provided) | string | The API client Id. Obtained from the Google dev console | |
scopes* (unless gapi instance provided) | string | The scopes your app requires (Drive docs) | |
gApiScriptId | string | "uploady-drive-api" | The id of the script tag (loading google api) that will be added to the page |
gapi | provide the Google API instance directly to be used | ||
queryParams | Object | Optional query parameters |
All other Uploady props can be passed as well. See docs here.
Note: no support for concurrent > 1
Example
import React from "react";
import DriveUploady from "drive-uploady";
import UploadButton from "@rpldy/upload-button";
export const App = () => {
return <DriveUploady
clientId="<my-client-id>"
scope="https://www.googleapis.com/auth/drive.file"
>
<h2>Drive Uploady</h2>
<UploadButton>Upload to Drive</UploadButton>
</DriveUploady>;
};
Upload to folder
import React from "react";
import DriveUploady from "drive-uploady";
import UploadButton from "@rpldy/upload-button";
export const App = () => {
return <DriveUploady
clientId="<my-client-id>"
scope="https://www.googleapis.com/auth/drive.file"
params={{ parents: ["folder-id"] }}
>
<h2>Drive Uploady</h2>
<UploadButton>Upload to Drive</UploadButton>
</DriveUploady>;
};
Use own GAPI instance
Drive-Uploady will try and use an existing window.gapi
instance if its available.
If not, it will create a new one (by adding a script tag).
In case you already have a GAPI client running in your page/app that's not available on the window, you can pass it as a prop:
It is assumed that if gapi is already available on the page then
gapi.load("client:auth2", ...)
was already called.
import React from "react";
import DriveUploady from "drive-uploady";
import UploadButton from "@rpldy/upload-button";
export const App = () => {
return <DriveUploady
clientId="<my-client-id>"
scope="https://www.googleapis.com/auth/drive.file"
gapi={window.parent.gapi}
>
<h2>Drive Uploady</h2>
<UploadButton>Upload to Drive</UploadButton>
</DriveUploady>;
};