Usa el componente web de Google Picker

El componente web de Google Picker ofrece una forma adicional de integrar la API de Google Picker en tus apps web.

El componente web simplifica la integración de la selección de archivos de Google Drive en tus apps web. Incluye toda la lógica de carga y autenticación de la API en un solo elemento HTML. Te permite colocar una etiqueta <drive-picker> directamente en tu código sin necesidad de escribir la lógica de carga de gapi. Se puede usar en HTML y JavaScript sin formato, y también es independiente del framework, ya que funciona sin problemas con Svelte, Vue, Angular y muchos más.

Para obtener más información sobre la biblioteca de componentes web, consulta @googleworkspace/drive-picker-element.

En el caso de las apps de React, usa el paquete oficial de wrapper de React del componente web: @googleworkspace/drive-picker-react.

Características clave

  • Integración directa: Agrega Google Picker a tus apps web con unas pocas líneas de código.
  • Independiente del framework: Funciona sin problemas con cualquier framework web que elijas (React, Vue, Angular, etc.).
  • Código abierto y personalizable: El código está disponible de forma gratuita y puedes personalizarlo para que se adapte a tus necesidades específicas.
  • Compatibilidad con OAuth sin problemas: Controla la autenticación del usuario automáticamente, lo que proporciona una experiencia del usuario fluida.
  • Vistas personalizables: Configura Google Picker para que muestre solo los tipos de archivo o las vistas que necesitas configurando atributos.

Comenzar

  1. Instala el componente con NPM o similar:

    npm i @googleworkspace/drive-picker-element

    También hay disponible una versión de CDN. Para conocer los formatos y las versiones disponibles, consulta unpkg.

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

  2. Importa los componentes @googleworkspace/drive-picker-element en tu archivo JavaScript:

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

    La importación no es obligatoria si usas la versión de CDN, ya que carga automáticamente la biblioteca de Google Picker y la biblioteca cliente de la API de Google que se usa para la autenticación.

  3. Agrega los elementos personalizados a tu archivo HTML:

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

    Para obtener información sobre los atributos y las propiedades de <drive-picker/> y <drive-picker-docs-view/>, consulta la documentación de referencia de @googleworkspace/drive-picker-element.

Eventos

El elemento <drive-picker/> envía los siguientes eventos personalizados:

Evento Descripción
picker-picked Se activa cuando el usuario selecciona uno o más elementos.
picker-canceled Se activa cuando el usuario cancela la selección haciendo clic en el botón Cancelar o cerrando el diálogo sin una selección.
picker-error Se activa cuando se produce un error durante la inicialización o la selección de archivos.

Para obtener más información sobre los eventos, consulta la @googleworkspace/drive-picker-element documentación en NPM.

Detalles del evento

Para el evento picker-picked, el detalle del evento contiene el Google Picker ResponseObject completo.

{
  "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
      }
    ]
  }
}

Las propiedades de uso frecuente en el objeto de respuesta son las siguientes:

  • action: Es la acción que activó la devolución de llamada (por ejemplo, PICKED).
  • docs: Es un array de DocumentObjects seleccionados por el usuario. Cada objeto contiene propiedades como las siguientes:
    • id: Es el identificador único del elemento seleccionado.
    • mimeType: Es el tipo de MIME del elemento.
    • name: Es el nombre del elemento.
    • url: Es la URL para abrir el elemento en Drive.
    • sizeBytes: Es el tamaño del elemento seleccionado en bytes. El valor no se muestra cuando se sube un elemento.

Para el evento picker-error, event.detail contiene un objeto o una cadena de error que describe la falla (por ejemplo, ERR_USER_NOT_AUTHENTICATED).

Ejemplos

En las siguientes muestras de código, se muestra cómo usar el componente web de Google Picker para casos de uso comunes. Para cada muestra de código, reemplaza lo siguiente:

  • PROMPT: Es una lista sensible a mayúsculas y minúsculas delimitada por espacios de mensajes de autorización de la Cuenta de Google para presentar al usuario. Para obtener más información, consulta TokenClientConfig.prompt.

  • ORIGIN: Es el parámetro de origen del selector. Por ejemplo, https://developers.google.com. Para obtener más información, consulta el PickerBuilder.setOrigin método.

  • APP_ID: Es el ID de la app de Drive. Para obtener más información, consulta el PickerBuilder.setAppId método.

  • CLIENT_ID: Es el ID de cliente de OAuth 2.0. Para obtener más información, consulta Usa OAuth 2.0 para acceder a las APIs de Google.

Archivos PDF

Filtra la vista para mostrar solo los archivos PDF con el atributo 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>

Archivos de imagen y video

Filtra la vista para mostrar solo los archivos de imagen (JPEG, PNG) y video (MP4, QuickTime) con el atributo 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>

Archivos propios

Filtra la vista para mostrar solo los archivos que son propiedad del usuario actual con el atributo 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>

Consultar archivos sin título

Filtra la vista para mostrar los archivos que coinciden con la consulta de búsqueda "Sin título" con el atributo 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>

Archivos destacados

Filtra la vista para mostrar solo los archivos destacados con el atributo 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>
  • Para obtener información detallada sobre los atributos, los eventos y las propiedades, consulta la documentación completa drive-picker-element en GitHub.