Utilizzare il componente web Google Picker

Il componente web Google Picker offre un modo aggiuntivo per integrare l'API Google Picker nelle tue app web.

Il componente web semplifica l'integrazione della selezione dei file di Google Drive nelle tue app web. Raggruppa tutta la logica di caricamento e autenticazione dell'API boilerplate in un unico elemento HTML. Ti consente di inserire un tag <drive-picker> direttamente nel codice senza dover scrivere la logica di caricamento di gapi. Può essere utilizzato in HTML e JavaScript semplici ed è anche indipendente dal framework, funzionando perfettamente con Svelte, Vue, Angular e altri.

Per saperne di più sulla libreria dei componenti web, consulta @googleworkspace/drive-picker-element.

Per le app React, utilizza il pacchetto wrapper React ufficiale del componente web: @googleworkspace/drive-picker-react.

Funzionalità principali

  • Integrazione semplice: aggiungi Google Picker alle tue app web con poche righe di codice.
  • Indipendente dal framework:funziona perfettamente con qualsiasi framework web tu scelga (React, Vue, Angular e così via).
  • Open source e personalizzabile:il codice è disponibile senza costi e puoi personalizzarlo in base alle tue esigenze specifiche.
  • Supporto OAuth senza interruzioni: gestisce automaticamente l'autenticazione degli utenti, offrendo un'esperienza utente fluida.
  • Visualizzazioni personalizzabili:configura Google Picker in modo che mostri solo i tipi di file o le visualizzazioni che ti servono impostando gli attributi.

Inizia

  1. Installa il componente utilizzando NPM o un altro strumento simile:

    npm i @googleworkspace/drive-picker-element

    È disponibile anche una versione CDN. Per i formati e le versioni disponibili, vedi unpkg.

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

  2. Importa i componenti @googleworkspace/drive-picker-element nel file JavaScript:

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

    L'importazione non è necessaria se utilizzi la versione CDN, in quanto carica automaticamente la libreria Google Picker e la libreria client dell'API Google utilizzata per l'autenticazione.

  3. Aggiungi gli elementi personalizzati al file HTML:

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

    Per gli attributi e le proprietà di <drive-picker/> e <drive-picker-docs-view/>, consulta la documentazione di riferimento per @googleworkspace/drive-picker-element.

Eventi

L'elemento <drive-picker/> invia i seguenti eventi personalizzati:

Evento Descrizione
picker-picked Attivato quando l'utente seleziona uno o più elementi.
picker-canceled Attivato quando l'utente annulla la selezione facendo clic sul pulsante Annulla o chiudendo la finestra di dialogo senza una selezione.
picker-error Attivato quando si verifica un errore durante l'inizializzazione o la selezione dei file.

Per saperne di più sugli eventi, consulta la @googleworkspace/drive-picker-element documentazione su NPM.

Dettagli dell'evento

Per l'evento picker-picked, i dettagli dell'evento contengono l'intero selettore Google 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
      }
    ]
  }
}

Le proprietà di uso comune nell'oggetto di risposta sono:

  • action: l'azione che ha attivato il callback (ad esempio, PICKED).
  • docs: un array di DocumentObject selezionati dall'utente. Ogni oggetto contiene proprietà come:
    • id: l'identificatore univoco dell'elemento selezionato.
    • mimeType: il tipo MIME dell'elemento.
    • name: il nome dell'elemento.
    • url: l'URL per aprire l'elemento in Drive.
    • sizeBytes: le dimensioni dell'elemento selezionato in byte. Il valore non viene restituito quando viene caricato un elemento.

Per l'evento picker-error, event.detail contiene un oggetto o una stringa di errore che descrive l'errore (ad esempio, ERR_USER_NOT_AUTHENTICATED).

Esempi

I seguenti esempi di codice mostrano come utilizzare il componente web Google Picker per casi d'uso comuni. Per ogni esempio di codice, sostituisci quanto segue:

File PDF

Filtra la visualizzazione per mostrare solo i file PDF utilizzando l'attributo 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>

File di immagini e video

Filtra la visualizzazione per mostrare solo i file immagine (JPEG, PNG) e video (MP4, QuickTime) utilizzando l'attributo 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>

File di mia proprietà

Filtra la visualizzazione per mostrare solo i file di proprietà dell'utente corrente utilizzando l'attributo 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>

Query per file senza titolo

Filtra la visualizzazione per mostrare i file che corrispondono alla query di ricerca "Senza titolo" utilizzando l'attributo 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>

File aggiunti a Speciali

Filtra la visualizzazione in modo da mostrare solo i file speciali utilizzando l'attributo 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>
  • Per informazioni dettagliate su attributi, eventi e proprietà, consulta la documentazione completa drive-picker-element su GitHub.