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, was für eine reibungslose Nutzererfahrung sorgt.
  • Anpassbare Ansichten:Sie können Google Picker so konfigurieren, dass nur die gewünschten Dateitypen oder Ansichten angezeigt werden, indem Sie Attribute festlegen.

Jetzt starten

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

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

  3. 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 Attribute 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 Attribute 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 Fehlerbeschreibung (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ß-/kleinschreibungssensitive Liste von Google Autorisierungsaufforderungen für Google-Konten, die dem Nutzer angezeigt werden sollen. Weitere Informationen finden Sie unter TokenClientConfig.prompt.

  • ORIGIN: Der Ursprungsparameter für die Auswahl. Beispiel: https://developers.google.com. Weitere Informationen finden Sie unter der PickerBuilder.setOrigin Methode.

  • APP_ID: Die Drive-App-ID. Weitere Informationen finden Sie unter der PickerBuilder.setAppId Methode.

  • 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, deren Eigentümer ich bin

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.