Utiliser le composant Web Google Picker

Le composant Web Google Picker offre un moyen supplémentaire d'intégrer l'API Google Picker dans vos applications Web.

Le composant Web simplifie l'intégration de la sélection de fichiers Google Drive dans vos applications Web. Il encapsule toute la logique d'authentification et de chargement de l'API dans un seul élément HTML. Il vous permet de déposer une balise <drive-picker> directement dans votre code sans avoir à écrire la logique de chargement gapi. Il peut être utilisé en HTML et JavaScript simples, et est également indépendant du framework, fonctionnant de manière transparente avec Svelte, Vue, Angular, etc.

Pour en savoir plus sur la bibliothèque de composants Web, consultez @googleworkspace/drive-picker-element.

Pour les applications React, utilisez le package wrapper React officiel du composant Web : @googleworkspace/drive-picker-react.

Principales fonctionnalités

  • Intégration simple : ajoutez Google Picker à vos applications Web en quelques lignes de code.
  • Indépendant du framework : fonctionne de manière transparente avec n'importe quel framework Web de votre choix (React, Vue, Angular, etc.).
  • Open Source et personnalisable : le code est disponible sans frais et vous pouvez le personnaliser en fonction de vos besoins spécifiques.
  • Compatibilité OAuth transparente : gère automatiquement l'authentification des utilisateurs, offrant ainsi une expérience utilisateur fluide.
  • Vues personnalisables : configurez Google Picker pour n'afficher que les types de fichiers ou les vues dont vous avez besoin en définissant des attributs.

Premiers pas

  1. Installez le composant à l'aide de NPM ou d'un outil similaire :

    npm i @googleworkspace/drive-picker-element

    Une version CDN est également disponible. Pour connaître les formats et versions disponibles, consultez unpkg.

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

  2. Importez les composants @googleworkspace/drive-picker-element dans votre fichier JavaScript :

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

    L'importation n'est pas requise si vous utilisez la version CDN, car elle charge automatiquement la bibliothèque Google Picker et la bibliothèque cliente de l'API Google utilisée pour l'authentification.

  3. Ajoutez les éléments personnalisés à votre fichier HTML :

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

    Pour les attributs et propriétés <drive-picker/> et <drive-picker-docs-view/>, consultez la documentation de référence pour @googleworkspace/drive-picker-element.

Événements

L'élément <drive-picker/> distribue les événements personnalisés suivants :

Événement Description
picker-picked Déclenché lorsque l'utilisateur sélectionne un ou plusieurs éléments.
picker-canceled Déclenché lorsque l'utilisateur annule la sélection en cliquant sur le bouton "Annuler" ou en fermant la boîte de dialogue sans effectuer de sélection.
picker-error Déclenché lorsqu'une erreur se produit lors de l'initialisation ou de la sélection de fichiers.

Pour en savoir plus sur les événements, consultez la @googleworkspace/drive-picker-element documentation sur NPM.

Détails de l'événement

Pour l'événement picker-picked, le détail de l'événement contient l'intégralité de 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
      }
    ]
  }
}

Les propriétés les plus couramment utilisées dans l'objet de réponse sont les suivantes :

  • action: action qui a déclenché le rappel (par exemple, PICKED).
  • docs : tableau d'objets DocumentObject sélectionnés par l'utilisateur. Chaque objet contient des propriétés telles que :
    • id: identifiant unique de l'élément sélectionné.
    • mimeType: type MIME de l'élément.
    • name: nom de l'élément.
    • url: URL permettant d'ouvrir l'élément dans Drive.
    • sizeBytes: taille de l'élément sélectionné en octets. La valeur n'est pas renvoyée lorsqu'un élément est importé.

Pour l'événement picker-error, event.detail contient un objet d'erreur ou une chaîne décrivant l'échec (par exemple, ERR_USER_NOT_AUTHENTICATED).

Exemples

Les exemples de code suivants montrent comment utiliser le composant Web Google Picker pour des cas d'utilisation courants. Pour chaque exemple de code, remplacez les éléments suivants :

Fichiers PDF

Filtre la vue pour n'afficher que les fichiers PDF à l'aide de l'attribut 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>

Fichiers image et vidéo

Filtre la vue pour n'afficher que les fichiers image (JPEG, PNG) et vidéo (MP4, QuickTime) à l'aide de l'attribut 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>

Fichiers dont je suis le propriétaire

Filtre la vue pour n'afficher que les fichiers appartenant à l'utilisateur actuel à l'aide de l'attribut 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>

Rechercher des fichiers sans titre

Filtre la vue pour afficher les fichiers correspondant à la requête de recherche "Sans titre" à l'aide de l'attribut 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>

Fichiers favoris

Filtre la vue pour n'afficher que les fichiers favoris à l'aide de l'attribut 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>
  • Pour obtenir des informations détaillées sur les attributs, les événements et les propriétés, consultez la documentation complète drive-picker-element sur GitHub.