React-nextjs-google-drive-picker

Google drive picker

Description

Google drive picker custom hook. A fork of José-CD’s implementation that allows you to use the Google Drive Picker without requiring OAuth app verification or a security assessment, since most apps don’t need it. The default scope https://www.googleapis.com/auth/drive.readonly has been replaced with https://www.googleapis.com/auth/drive.file, which is a less sensitive scope.

Getting Started

Installing

With npm

npm i react-nextjs-google-drive-picker

With yarn

yarn add react-nextjs-google-drive-picker

Usage

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


function App() {
  const [openPicker, authResponse] = useDrivePicker();  
  // const customViewsArray = [new google.picker.DocsView()]; // custom view
  const handleOpenPicker = () => {
    openPicker({
      appId: "xxxxxxxxxxxxxxxxx",
      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

Parameter	Type	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
appId	string	REQUIRED	Google App ID
disableDefaultView	boolean	false	Disables default view
viewId	string	DOCS	ViewIdOptions
viewMimeTypes	string	optional	Comma-separated MIME types. Use this instead of viewId if you need to filter multiple types. See list: https://developers.google.com/drive/api/v3/mime-types
setIncludeFolders	boolean	false	Show folders in the picker view
setSelectFolderEnabled	boolean	false	Allows the user to select a folder in Google Drive
token	string	optional	Access token to skip authentication
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.file']	Array of custom scopes you want to add to the picker
locale	string	en	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

[@Hogagatech]

Acknowledgments

Inspiration, code snippets

• @Jose medina
• sdoomz
• obonyojimmy