Google verwendet KI-Technologie, um Inhalte in Ihre bevorzugte Sprache zu übersetzen. KI-Übersetzungen können Fehler enthalten.

Google Picker-Webkomponente verwenden

Die Google Picker-Webkomponente bietet eine zusätzliche Möglichkeit, die Google Picker API in Ihre Webanwendungen einzubinden.

Die Webkomponente vereinfacht die Einbindung der Google Drive-Dateiauswahl in Ihre Webanwendungen. Sie fasst die gesamte Boilerplate-API-Lade- und Authentifizierungslogik in einem einzigen HTML-Element zusammen. So können Sie ein <drive-picker>-Tag direkt in Ihren Code einfügen, ohne die gapi-Ladelogik schreiben zu müssen. Sie kann in einfachem HTML und JavaScript verwendet werden und ist auch frameworkunabhängig. Sie funktioniert nahtlos mit Svelte, Vue, Angular und mehr.

Weitere Informationen zur Webkomponentenbibliothek finden Sie unter @googleworkspace/drive-picker-element.

Für React-Anwendungen verwenden Sie das offizielle React-Wrapper-Paket der Webkomponente: @googleworkspace/drive-picker-react.

Wichtige Features

Einfache Einbindung:Fügen Sie Google Picker mit wenigen Codezeilen zu Ihren Webanwendungen hinzu.
Frameworkunabhängig:Funktioniert nahtlos mit jedem Webframework Ihrer Wahl (React, Vue, Angular usw.).
Open Source und anpassbar:Der Code ist frei verfügbar und kann an Ihre spezifischen Anforderungen angepasst werden.
Nahtlose OAuth-Unterstützung:Die Nutzerauthentifizierung wird automatisch verarbeitet und bietet so eine reibungslose Nutzererfahrung.
Anpassbare Ansichten:Konfigurieren Sie Google Picker so, dass nur die gewünschten Dateitypen oder Ansichten angezeigt werden, indem Sie Attribute festlegen.

Jetzt starten

Installieren Sie die Komponente mit NPM oder einer ähnlichen Methode:
```
npm i @googleworkspace/drive-picker-element
```
Eine CDN-Version ist ebenfalls verfügbar. Informationen zu verfügbaren Formaten und Versionen finden Sie unter unpkg.
```
<script src="https://unpkg.com/@googleworkspace/drive-picker-element@latest/dist/index.iife.min.js"></script>
```
Importieren Sie die @googleworkspace/drive-picker-element-Komponenten in Ihre JavaScript-Datei:
```
import "@googleworkspace/drive-picker-element";
```
Der Import ist nicht erforderlich, wenn Sie die CDN-Version verwenden, da die Google Picker-Bibliothek und die für die Authentifizierung verwendete Google API-Clientbibliothek automatisch geladen werden.
Fügen Sie die benutzerdefinierten Elemente in Ihre HTML-Datei ein:
```
<drive-picker>
    <drive-picker-docs-view></drive-picker-docs-view>
</drive-picker>
```
Informationen zu <drive-picker/> und <drive-picker-docs-view/> Attributen und Eigenschaften finden Sie in der Referenzdokumentation für die @googleworkspace/drive-picker-element.

Ereignisse

Das <drive-picker/> Element löst die folgenden benutzerdefinierten Ereignisse aus:

Ereignis	Beschreibung
`picker-picked`	Wird ausgelöst, wenn der Nutzer ein oder mehrere Elemente auswählt.
`picker-canceled`	Wird ausgelöst, wenn der Nutzer die Auswahl abbricht, indem er auf die Schaltfläche „Abbrechen“ klickt oder das Dialogfeld schließt, ohne eine Auswahl zu treffen.
`picker-error`	Wird ausgelöst, wenn bei der Initialisierung oder Dateiauswahl ein Fehler auftritt.

Weitere Informationen zu Ereignissen finden Sie in der @googleworkspace/drive-picker-element Dokumentation auf NPM.

Veranstaltungsdetails

Für das picker-picked Ereignis enthält das Ereignisdetail das vollständige 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
      }
    ]
  }
}

Die am häufigsten verwendeten Eigenschaften im Antwortobjekt sind:

action: Die Aktion, die den Callback ausgelöst hat (z. B. PICKED).
docs: Ein Array von DocumentObjects, die von dem Nutzer ausgewählt wurden. Jedes Objekt enthält Eigenschaften wie:
- id: Die eindeutige Kennung des ausgewählten Elements.
- mimeType: Der MIME-Typ des Elements.
- name: Der Name des Elements.
- url: Die URL zum Öffnen des Elements in Drive.
- sizeBytes: Die Größe des ausgewählten Elements in Byte. Der Wert wird nicht zurückgegeben, wenn ein Element hochgeladen wird.

Für das Ereignis picker-error enthält event.detail ein Fehlerobjekt oder eine String, die den Fehler beschreibt (z. B. ERR_USER_NOT_AUTHENTICATED).

Beispiele

Die folgenden Codebeispiele zeigen, wie Sie die Google Picker-Webkomponente für häufige Anwendungsfälle verwenden. Ersetzen Sie in jedem Codebeispiel Folgendes:

PROMPT: Eine durch Leerzeichen getrennte, groß-/kleinschreibungsabhängige Liste von Google Konten-Autorisierungsaufforderungen, die dem Nutzer angezeigt werden sollen. Weitere Informationen finden Sie unter TokenClientConfig.prompt.
ORIGIN: Der Parameter „origin“ für die Auswahl. Beispiel: https://developers.google.com. Weitere Informationen finden Sie unter PickerBuilder.setOrigin Methode.
APP_ID: Die Drive-App-ID. Weitere Informationen finden Sie unter Methode PickerBuilder.setAppId.
CLIENT_ID: Die OAuth 2.0-Client-ID. Weitere Informationen finden Sie unter Mit OAuth 2.0 auf Google APIs zugreifen.

PDF-Dateien

Filtert die Ansicht so, dass nur PDF-Dateien angezeigt werden, indem das Attribut mime-types verwendet wird.

<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>

Bild- und Videodateien

Filtert die Ansicht so, dass nur Bilddateien (JPEG, PNG) und Videodateien (MP4, QuickTime) angezeigt werden, indem das Attribut mime-types verwendet wird.

<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>

Dateien von mir

Filtert die Ansicht so, dass nur Dateien angezeigt werden, deren Eigentümer der aktuelle Nutzer ist, indem das Attribut owned-by-me verwendet wird.

<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>

Nach unbenannten Dateien suchen

Filtert die Ansicht so, dass nur Dateien angezeigt werden, die der Suchanfrage „Unbenannt“ entsprechen, indem das Attribut query verwendet wird.

<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>

Markierte Dateien

Filtert die Ansicht so, dass nur markierte Dateien angezeigt werden, indem das Attribut starred verwendet wird.

<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>

Ausführliche Informationen zu Attributen, Ereignissen und Eigenschaften finden Sie in der vollständigen drive-picker-element Dokumentation auf GitHub.

Google Picker-Webkomponente verwenden Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.