https://github.com/rpldy/drive-uploady
react-uploady wrapper for google-drive uploads
https://github.com/rpldy/drive-uploady
Last synced: 5 months ago
JSON representation
react-uploady wrapper for google-drive uploads
- Host: GitHub
- URL: https://github.com/rpldy/drive-uploady
- Owner: rpldy
- License: mit
- Created: 2020-11-14T18:31:05.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-10-26T16:17:42.000Z (over 2 years ago)
- Last Synced: 2025-01-08T07:26:43.508Z (5 months ago)
- Language: JavaScript
- Size: 1.58 MB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Drive Uploady
Provides a custom [React Uploady](https://react-uploady.org) provider for uploading to Google Drive.
All Uploady functionality such as [hooks](https://react-uploady.org/docs/category/hooks/) and components (ex: [Upload-Preview](https://react-uploady.org/docs/api/components/uploadPreview/)) can be used with this package.
Uploads are sent to the multipart endpoint: [Google Drive docs](https://developers.google.com/drive/api/v3/manage-uploads#multipart).
> Note: no support for URL based uploads, only files.
## Installation
```shell
#Yarn:
$ yarn add drive-uploady @rpldy/uploady
#NPM:
$ npm i drive-uploady @rpldy/uploady
```
## Props
| Name (* = mandatory) | Type | Default | Description |
|-----------------------------------------|-----------------------------------|--------------------|-----------------------------------------------------------------------------------------------------------|
| clientId* (unless getToken is provided) | string | | The API client Id. Obtained from the [Google dev console](https://console.developers.google.com/) |
| scopes* (unless getToken is provided) | string | | The scopes your app requires ([Drive docs](https://developers.google.com/drive/api/v2/about-auth)) |
| gApiScriptIdPrefix | string | "uploady-drive-" | The id of the script tag (loading google api) that will be added to the page |
| getToken | [GetTokenMethod](#gettokenmethod) | | provide a function that will provide the (access) token |
| queryParams | Object | | [Optional query parameters](https://developers.google.com/drive/api/v3/reference/files/create#parameters) |
All other Uploady props can be passed as well. See docs [here](https://react-uploady.org/docs/api/#props).
> Note: no support for concurrent > 1
## Example
```javascript
import React from "react";
import DriveUploady from "drive-uploady";
import UploadButton from "@rpldy/upload-button";
export const App = () => {
return (
Drive Uploady
Upload to Drive
);
};
```
### Upload to folder
```javascript
import React from "react";
import DriveUploady from "drive-uploady";
import UploadButton from "@rpldy/upload-button";
export const App = () => {
return (
Drive Uploady
Upload to Drive
);
};
```
## Authentication
By default, Drive-Uploady will load and use its own Google Authentication Provider.
The process involves loading the scripts from Google:
1. https://apis.google.com/js/api.js
2. https://accounts.google.com/gsi/client
> Note: Using two scripts is due to Google's [deprecation decision](https://developers.googleblog.com/2022/03/gis-jsweb-authz-migration.html).
Once the scripts are loaded. Internally, a [TokenClient](https://developers.google.com/identity/oauth2/web/reference/js-reference#TokenClient) will be created (_google.accounts.oauth2.initTokenClient_) and will be used in order
to retrieve an access token for the user.
The user will be shown a pop-up through which they can sign-in (if not already) and approve the application to access their Drive.
> The application (created in the [API Console](https://console.cloud.google.com/)) must have the right scope (ex: https://www.googleapis.com/auth/drive.file).
As long as the page isn't refreshed and the token is still valid, the user will not be prompted to approve again when uploading additional files.
In case the token is expired, the user will be prompted again.
## Own Authentication
In case you are already implementing your own use of the oauth flow with Google.
Drive-Uploady let's you pass in a _getToken_ method as a prop that will be used to retrieve the access token when needed.
All scripts and authentication will be assumed to have been loaded and set up separately from Drive-Uploady.
### GetTokenMethod
```typescript
export type AuthToken = {
access_token: string;
expires_in: number;
};
export type GetTokenMethod = (cb: (token: AuthToken) => void) => void;
```
Example use of getToken() implementation:
```javascript
import React from "react";
import DriveUploady from "drive-uploady";
import UploadButton from "@rpldy/upload-button";
const getToken = (cb) => {
const tokenClient = window.google.accounts.oauth2.initTokenClient({
client_id: "MY-CLIENT_ID",
scope: "MY-SCOPE",
callback: (response) => {
cb(response);
},
});
tokenClient.requestAccessToken({ prompt: "consent" });
};
export const App = () => {
return (
Drive Uploady
Upload to Drive
);
};
```
## Revoke Token
The library provides a utility function to revoke the token previously retrieved on the page:
```javascript
import { revokeToken } from "drive-uploady";
const RevokeButton = () => {
return (
Revoke Token
);
};
```