React-google-drive-picker (Hard Fork by TurboDocx)

Google Drive Picker custom hook, maintained by TurboDocx.

Description

Google Drive picker custom hook.

Getting Started

Installing

With npm

npm i react-google-drive-picker

With yarn

yarn add react-google-drive-picker

Usage

import  { useEffect } from 'react';
import useDrivePicker from 'react-google-drive-picker'


function App() {
  const [openPicker, authResponse] = useDrivePicker();  
  // const customViewsArray = [new google.picker.DocsView()]; // custom view
  const handleOpenPicker = () => {
    openPicker({
      clientId: "xxxxxxxxxxxxxxxxx",
      developerKey: "xxxxxxxxxxxx",
      viewId: "DOCS",
      // token: token, // pass oauth token in case you already have one
      showUploadView: true,
      showUploadFolders: true,
      supportDrives: true,
      setEnableDrives: false, // this adds support for Shared Drives on Premium Google Workspace plans. 
      multiselect: true,
      // customViews: customViewsArray, // custom view
      callbackFunction: (data) => {
        if (data.action === 'cancel') {
          console.log('User clicked cancel/close button')
        }
        console.log(data)
      },
    })
  }


  
  return (
    <div>
        <button onClick={() => handleOpenPicker()}>Open Picker</button>
    </div>
  );
}

export default App;

Picker configuration props

Picker Props

| params | value | default value | description | |------------------|----------|------------------|-------------------------------| | callbackFunction |function | REQUIRED |Callback function that will be called on picker action | | clientId | string | REQUIRED | Google client id | | developerKey | string | REQUIRED | Google developer key | | disableDefaultView | boolean | false | disables default view | | viewId | string | DOCS | ViewIdOptions | | viewMimeTypes | string | optional |Comma separated mimetypes. Use this in place of viewId if you need to filter multiple type of files. list: https://developers.google.com/drive/api/v3/mime-types.| |setIncludeFolders| boolean | false |Show folders in the view items.| |setSelectFolderEnabled|boolean| false |Allows the user to select a folder in Google Drive.| | token | string | optional | access_token to skip auth part| | setOrigin | string | optional | Sets the origin of the Google Picker dialog | | multiselect | boolean | false | Enable picker multiselect | | supportDrives | boolean | false | Support shared drives | | showUploadView | boolean | false | Enable upload view | | showUploadFolders| boolean | false |Enable folder selection(upload)| | setParentFolder | string | disabled | Drive folder id to upload | | customViews |ViewClass[]| optional | Array of custom views you want to add to the picker| | customScopes |string[]| ['https://www.googleapis.com/auth/drive.readonly'] | Array of custom scopes you want to add to the picker| | locale |string | en | List of supported locales https://developers.google.com/picker/docs#i18n| | setEnableDrives |boolean | false | Enables the selection of Shared Drives (Requires Premium Google Workspace plans) |

viewId options

| option | description | |----------------------|---------------------------------| | DOCS |All Google Drive document types. | | DOCS_IMAGES |Google Drive photos.
|DOCS_IMAGES_AND_VIDEOS |Google Drive photos and videos. | | DOCS_VIDEOS |Google Drive videos. | | DOCUMENTS | Google Drive Documents. | | FOLDERS |Google Drive Folders. | | DRAWINGS |Google Drive Drawings. | | FORMS | Google Drive Forms. | | PDFS |PDF files stored in Google Drive.| | SPREADSHEETS |Google Drive Spreadsheets. |

Author

Originally Created by @Jose medina Maintained by the TurboDocx Team.

Acknowledgments

Inspiration, code snippets

• sdoomz
• obonyojimmy

Proudly Sponsored by TurboDocx