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