Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

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. Encapsula toda la lógica de autenticación y carga de la API de código repetitivo 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 simples, 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 del wrapper de React del componente web: @googleworkspace/drive-picker-react.

Características clave

Integración sencilla: Agrega Google Picker a tus apps web con unas pocas líneas de código.
Independiente del framework: Funciona a la perfección 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 perfecta con OAuth: Controla la autenticación del usuario de forma automática, lo que proporciona una experiencia del usuario fluida.
Vistas personalizables: Configura el Selector de Google para que muestre solo los tipos de archivo o las vistas que necesitas estableciendo atributos.

Comenzar

Instala el componente con NPM o un administrador 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>
```
Importa los componentes de @googleworkspace/drive-picker-element en tu archivo JavaScript:
```
import "@googleworkspace/drive-picker-element";
```
La importación no es necesaria 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.
Agrega los elementos personalizados a tu archivo HTML:
```
<drive-picker>
    <drive-picker-docs-view></drive-picker-docs-view>
</drive-picker>
```
Para 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 realizar 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 documentación de @googleworkspace/drive-picker-element en NPM.

Detalles del evento

En el caso del evento picker-picked, el detalle del evento contiene el selector de Google completo 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
      }
    ]
  }
}

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 objetos DocumentObject 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 devuelve cuando se sube un elemento.

En el caso del evento picker-error, event.detail contiene un objeto de error o una cadena 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 delimitada por espacios y sensible a mayúsculas y minúsculas de mensajes de autorización de la Cuenta de Google que se le presentarán 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 método PickerBuilder.setOrigin.
APP_ID: Es el ID de la app de Drive. Para obtener más información, consulta el método PickerBuilder.setAppId.
CLIENT_ID: Es el ID de cliente de OAuth 2.0. Si deseas 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 de mi propiedad

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>

Consulta para buscar archivos sin título

Filtra la vista para mostrar los archivos que coinciden con la búsqueda "Sin título" usando 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 de drive-picker-element en GitHub.

Usa el componente web de Google Picker Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.