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

The Google Picker web component offers an additional way to integrate the Google Picker API into your web apps.

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

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

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

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

• Простая интеграция: добавьте Google Picker в свои веб-приложения всего несколькими строками кода.
• Framework independent: Works seamlessly with any web framework you choose (React, Vue, Angular, etc.).
• Открытый исходный код и возможность настройки: код находится в свободном доступе, и вы можете настроить его в соответствии со своими конкретными потребностями.
• Бесперебойная поддержка OAuth: автоматическая аутентификация пользователей, обеспечивающая удобство использования.
• Настраиваемые представления: Настройте Google Picker так, чтобы он отображал только необходимые типы файлов или представления, задав соответствующие атрибуты.

Начать

1. Install the component using NPM or similar:

   npm i @googleworkspace/drive-picker-element

   A CDN version is also available. For available formats and versions, see unpkg .

   <script src="https://unpkg.com/@googleworkspace/drive-picker-element@latest/dist/index.iife.min.js"></script>
   

2. Импортируйте компоненты ` @googleworkspace/drive-picker-element в свой JavaScript-файл:

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

   The import isn't required if you're using the CDN version as it automatically loads the Google Picker library and the Google API client library used for authentication.

3. Add the custom elements to your HTML file:

   <drive-picker>
       <drive-picker-docs-view></drive-picker-docs-view>
   </drive-picker>
   

   Информацию об атрибутах и ​​свойствах <drive-picker/> и <drive-picker-docs-view/> см. в справочной документации по @googleworkspace/drive-picker-element .

События

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

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

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

Для события picker-picked , в подробной информации о событии содержится полный ResponseObject средства выбора Google.

{
  "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 : действие, которое вызвало вызов функции обратного вызова (например, PICKED ).
• docs : массив объектов DocumentObject , выбранных пользователем. Каждый объект содержит такие свойства, как:
  • id : the unique identifier of the selected item.
  • mimeType : the MIME type of the item.
  • name : the name of the item.
  • url : the URL to open the item in Drive.
  • sizeBytes : размер выбранного элемента в байтах. Это значение не возвращается при загрузке элемента.

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

Примеры

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

• PROMPT : список запросов авторизации учетной записи Google, разделенных пробелами и чувствительных к регистру, для отображения пользователю. Для получения дополнительной информации см. 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>

Image and video files

Фильтрует представление, отображая только файлы изображений (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>

Files owned by me

Фильтрует представление, отображая только файлы, принадлежащие текущему пользователю, используя атрибут 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 for untitled files

Фильтрует представление, чтобы отображать файлы, соответствующие поисковому запросу "Без названия", используя атрибут 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 files

Фильтрует представление, отображая только файлы, отмеченные 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.