Google Drive Picker custom hook, maintained by TurboDocx.
Google Drive picker custom hook.
With npm
npm i react-google-drive-picker
With yarn
yarn add react-google-drive-picker
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;
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) |
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. |
Originally Created by @Jose medina Maintained by the TurboDocx Team.
Inspiration, code snippets