Эта страница переведена с помощью Cloud Translation API.

Используйте веб-компонент Google Picker.

Веб-компонент Google Picker предоставляет дополнительный способ интеграции API Google Picker в ваши веб-приложения.

Этот веб-компонент упрощает интеграцию выбора файлов из Google Drive в ваши веб-приложения. Он объединяет всю стандартную логику загрузки API и аутентификации в один HTML-элемент. Он позволяет вставлять тег <drive-picker> непосредственно в ваш код без необходимости писать логику загрузки gapi . Его можно использовать в обычном HTML и JavaScript, а также он не зависит от фреймворков, бесперебойно работая со Svelte, Vue, Angular и другими.

Для получения дополнительной информации о библиотеке веб-компонентов см. @googleworkspace/drive-picker-element .

Для приложений React используйте официальный пакет-обертку React для веб-компонента: @googleworkspace/drive-picker-react .

Основные характеристики

Простая интеграция: добавьте Google Picker в свои веб-приложения всего несколькими строками кода.
Независимость от фреймворка: Бесперебойно работает с любым веб-фреймворком на ваш выбор (React, Vue, Angular и т. д.).
Открытый исходный код и возможность настройки: код находится в свободном доступе, и вы можете настроить его в соответствии со своими конкретными потребностями.
Бесперебойная поддержка OAuth: автоматическая аутентификация пользователей, обеспечивающая удобство использования.
Настраиваемые представления: Настройте Google Picker так, чтобы он отображал только необходимые типы файлов или представления, задав соответствующие атрибуты.

Начать

Установите компонент с помощью NPM или аналогичной программы:
```
npm i @googleworkspace/drive-picker-element
```
Также доступна версия для CDN. Информацию о доступных форматах и версиях см. в unpkg .
```
<script src="https://unpkg.com/@googleworkspace/drive-picker-element@latest/dist/index.iife.min.js"></script>
```
Import the @googleworkspace/drive-picker-element components into your JavaScript file:
```
import "@googleworkspace/drive-picker-element";
```
Импорт не требуется, если вы используете версию с CDN, поскольку она автоматически загружает библиотеку Google Picker и клиентскую библиотеку Google API, используемую для аутентификации.
Добавьте пользовательские элементы в свой HTML-файл:
```
<drive-picker>
    <drive-picker-docs-view></drive-picker-docs-view>
</drive-picker>
```
Информацию об атрибутах и свойствах <drive-picker/> и <drive-picker-docs-view/> см. в справочной документации по @googleworkspace/drive-picker-element .

События

Элемент <drive-picker/> отправляет следующие пользовательские события:

Событие	Описание
`picker-picked`	Событие срабатывает, когда пользователь выбирает один или несколько элементов.
`picker-canceled`	Событие срабатывает, когда пользователь отменяет выбор, нажав кнопку «Отмена» или закрывая диалоговое окно без выбора.
`picker-error`	Событие срабатывает при возникновении ошибки во время инициализации или выбора файла.

Для получения дополнительной информации о событиях см. документацию @googleworkspace/drive-picker-element на NPM.

Подробности мероприятия

For the picker-picked event, the event detail contains the full Google Picker ResponseObject .

{
  "type": "picker-picked",
  "detail": {
    "action": "PICKED",
    "docs": [
      {
        "id": ID,
        "mimeType": "application/pdf",
        "name": NAME,
        "url": "https://drive.google.com/file/d/ID/view?usp=drive_web",
        "sizeBytes": 12345
      }
    ]
  }
}

Наиболее часто используемые свойства в объекте ответа:

action : the action that triggered the callback (for example, PICKED ).
docs : массив объектов DocumentObject , выбранных пользователем. Каждый объект содержит такие свойства, как:
- id : уникальный идентификатор выбранного элемента.
- mimeType : MIME-тип элемента.
- name : the name of the item.
- url : URL-адрес для открытия элемента в Google Диске.
- sizeBytes : размер выбранного элемента в байтах. Это значение не возвращается при загрузке элемента.

Для события picker-error event.detail содержит объект ошибки или строку, описывающую сбой (например, ERR_USER_NOT_AUTHENTICATED ).

Примеры

Приведенные ниже примеры кода демонстрируют использование веб-компонента Google Picker в распространенных сценариях. В каждом примере кода замените следующее:

PROMPT : a space-delimited, case-sensitive list of Google Account authorization prompts to present the user. For more information, see TokenClientConfig.prompt .
ORIGIN : параметр происхождения для средства выбора. Например, https://developers.google.com . Для получения дополнительной информации см. метод PickerBuilder.setOrigin .
APP_ID : идентификатор приложения Google Диск. Для получения дополнительной информации см. метод PickerBuilder.setAppId .
CLIENT_ID : идентификатор клиента OAuth 2.0. Дополнительную информацию см. в разделе «Использование OAuth 2.0 для доступа к API Google» .

PDF-файлы

Фильтрует представление, отображая только PDF-файлы с помощью атрибута mime-types .

<drive-picker
  prompt="PROMPT"
  origin="ORIGIN"
  app-id="APP_ID"
  client-id="CLIENT_ID"
>
  <drive-picker-docs-view mime-types="application/pdf"></drive-picker-docs-view>
</drive-picker>

Файлы изображений и видео

Фильтрует представление, отображая только файлы изображений (JPEG, PNG) и видео (MP4, QuickTime) с помощью атрибута mime-types .

<drive-picker
  prompt="PROMPT"
  origin="ORIGIN"
  app-id="APP_ID"
  client-id="CLIENT_ID"
>
  <drive-picker-docs-view mime-types="image/jpeg,image/png,video/mp4,video/quicktime"></drive-picker-docs-view>
</drive-picker>

Файлы, принадлежащие мне.

Фильтрует представление, отображая только файлы, принадлежащие текущему пользователю, используя атрибут owned-by-me .

<drive-picker
  prompt="PROMPT"
  origin="ORIGIN"
  app-id="APP_ID"
  client-id="CLIENT_ID"
>
  <drive-picker-docs-view owned-by-me="true"></drive-picker-docs-view>
</drive-picker>

Запрос на поиск файлов без названия

Фильтрует представление, чтобы отображать файлы, соответствующие поисковому запросу "Без названия", используя атрибут query .

<drive-picker
  prompt="PROMPT"
  origin="ORIGIN"
  app-id="APP_ID"
  client-id="CLIENT_ID"
>
  <drive-picker-docs-view query="Untitled"></drive-picker-docs-view>
</drive-picker>

Отмеченные звездочкой файлы

Фильтрует представление, отображая только файлы, отмеченные starred ).

<drive-picker
  prompt="PROMPT"
  origin="ORIGIN"
  app-id="APP_ID"
  client-id="CLIENT_ID"
>
  <drive-picker-docs-view starred="true"></drive-picker-docs-view>
</drive-picker>

Подробную информацию об атрибутах, событиях и свойствах см. в полной документации drive-picker-element на GitHub.

Используйте веб-компонент Google Picker. Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.