React-google-drive-picker

Google drive picker

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,
      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.| | setOwnedByMe | boolean | false | Filters the documents based on whether they are owned by the user, or shared with the user. Do not combine this setting with setIncludeFolders. When setIncludeFolders(true) is set, setOwnedByMe is ignored.| | token | string | optional | access_token to skip auth part| | 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|

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

@Jose medina

Acknowledgments

Inspiration, code snippets

• sdoomz
• obonyojimmy