Newfoundland Pitbull Mix

    drive-uploady
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.5 • Public • Published

    npm version MIT License

    react-uploady Logo

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

    Install

    npm i drive-uploady

    DownloadsWeekly Downloads

    21

    Version

    0.2.5

    License

    MIT

    Unpacked Size

    37.6 kB

    Total Files

    25

    Last publish

    Collaborators

    • yoavniran