Description

A Web Component for Google Drive Picker.

Install

Install using NPM or similar.

npm i @googleworkspace/drive-picker-element

yarn add @googleworkspace/drive-picker-element

pnpm add @googleworkspace/drive-picker-element

Usage

import "@googleworkspace/drive-picker-element";

<drive-picker client-id="YOUR_CLIENT_ID" app-id="YOUR_APP_ID">
  <drive-picker-docs-view
    mime-types="application/json"
    label="JSON"
  ></drive-picker-docs-view>
  <drive-picker-docs-view owned-by-me="" label="Mine"></drive-picker-docs-view>
  <drive-picker-docs-view starred="" label="Starred"></drive-picker-docs-view>
</drive-picker>

See the components and the official reference documentation for more details:

| Status | Component | Reference Docs | | ----------------------------------------------------------------------------- | ------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | | ✅ | <drive-picker/> | PickerBuilder API Reference | | ✅ | <drive-picker-docs-view/> | DocsView API Reference | | ❌ - ToDo | <drive-picker-docs-upload-view/> | DocsUploadView API Reference |

To report issues or feature requests for the underlying Drive Picker, please use the issue tracker.

drive-picker

The drive-picker web component provides a convenient way to integrate the Google Picker API into your web applications. The Google Picker API is a JavaScript API that allows users to select or upload Google Drive files. This component acts as a "File Open" dialog for accessing and interacting with files stored on Google Drive.

Features:

• Provides a similar look-and-feel to the Google Drive UI.
• Offers several views showing previews and thumbnail images of Drive files.
• Displays as an inline, modal window, ensuring users never leave the main application.

Note: The Google Picker API does not support file organization, moving, or copying. For these operations, you should use either the Google Drive API or the Drive UI.

Example

<drive-picker
  app-id="675807958095"
  client-id="675807958095-nsptdcn5qdb6pl44cge1c6ghact9t5q0.apps.googleusercontent.com"
>
  <drive-picker-docs-view></drive-picker-docs-view>
</drive-picker>

Properties

| Property | Attribute | Type | Default | Description | | -------------- | ---------------- | ---------------------- | -------------------------------------------- | ----------------------------------------------------- | | appId | app-id | string | | The Google Drive app ID. | | clientId | client-id | string | | The Google API client ID. | | developerKey | developerKey | string \| undefined | | The Google API developer key. | | height | height | number \| undefined | | The height of the picker dialog. | | hideTitleBar | hide-title-bar | boolean \| undefined | | Whether to hide the title bar of the picker dialog. | | locale | locale | string \| undefined | | The locale of the picker dialog. | | maxItems | max-items | number \| undefined | | The maximum number of items that the user can select. | | multiselect | multiselect | boolean \| undefined | | Whether the user can select multiple items. | | oauthToken | oauth-token | string \| undefined | | The OAuth token to authenticate the user. | | origin | origin | string \| undefined | | The origin of the picker dialog. | | relayUrl | relay-url | string \| undefined | | The relay URL to use for cross-origin communication. | | scope | scope | string | "https://www.googleapis.com/auth/drive.file" | The scope of the OAuth token. | | title | title | string | "" | The title of the picker dialog. | | visible | visible | boolean | true | Whether the picker dialog is visible. | | width | width | number \| undefined | | The width of the picker dialog. |

Methods

| Method | Type | | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | | addEventListener | (type: "cancel" \| "picked", listener: (ev: CustomEvent<ResponseObject>): void, options?: boolean \| AddEventListenerOptions \| undefined) => void | | removeEventListener | (type: "cancel" \| "picked", listener: (ev: CustomEvent<ResponseObject>): void, options?: boolean \| EventListenerOptions \| undefined) => void |

Events

| Event | Type | Description | | -------- | ------------------------------------------- | -------------------------------------------------- | | cancel | CustomEvent<google.picker.ResponseObject> | Triggered when the user cancels the picker dialog. | | picked | CustomEvent<google.picker.ResponseObject> | Triggered when the user picks one or more items. |

Slots

| Name | Description | | ---- | ------------------------------------------------------------------------------------------------------------------------------ | | | The View elements to display in the picker. Each View element should implement a property view of type google.picker.View. |

drive-picker-docs-view

The drive-picker-docs-view element is used to define a view for the Google Drive Picker.

Example

<drive-picker-docs-view ownedByMe=""></drive-picker-docs-view>

Properties

| Property | Attribute | Modifiers | Type | Default | Description | | --------------------- | ----------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | enableDrives | enable-drives | | boolean \| undefined | | Indicates whether to enable drives in the view. | | includeFolders | include-folders | | boolean \| undefined | | Indicates whether to include folders in the view. | | label | label | | string \| undefined | | The label of the view. | | mimeTypes | mime-types | | string \| undefined | | The MIME types to filter the view by. | | mode | mode | | "GRID" \| "LIST" | "GRID" | The mode of the view. This should be one of the values of the google.picker.DocsViewMode enum. | | ownedByMe | owned-by-me | | boolean \| undefined | | Indicates whether to show only files owned by the user in the view. | | parent | parent | | string \| undefined | | The ID of the parent folder to restrict the view to. | | query | query | | string \| undefined | | The query string to filter the view by. | | selectFolderEnabled | select-folder-enabled | | boolean \| undefined | | Indicates whether selecting folders is enabled in the view. | | starred | starred | | boolean \| undefined | | Indicates whether to show only starred files in the view. | | view | | readonly | DocsView | | Gets the Google Drive Picker view based on the current property values. | | viewId | view-id | | "DOCS" \| "DOCS_IMAGES" \| "DOCS_IMAGES_AND_VIDEOS" \| "DOCS_VIDEOS" \| "DOCUMENTS" \| "DRAWINGS" \| "FOLDERS" \| "FORMS" \| "IMAGE_SEARCH" \| "PDFS" \| "PHOTO_ALBUMS" \| "PHOTO_UPLOAD" \| ... 6 more ... \| "YOUTUBE" | "DOCS" | The ID of the view. This should be one of the values of thegoogle.picker.ViewId enum.Note: The default value is DOCS which corresponds to thegoogle.picker.ViewId.DOCS enum value in the Google Drive Picker API andcorresponsds to all Google Drive document types. |

Development

pnpm install
pnpm build
pnpm serve
pnpm storybook