@danteissaias/react-google-drive-picker

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.
viewMode	string	optional	can be 'GRID' or 'LIST'
appId	string	''	See "Project number" under "IAM & Admin" > "Settings" in the GCP console
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

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