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. Racchiude tutta la logica di caricamento e autenticazione dell'API boilerplate in un singolo elemento HTML. Ti consente di inserire un tag <drive-picker> direttamente nel codice senza dover scrivere la logica di caricamento gapi. Può essere utilizzato in HTML e JavaScript semplici ed è anche indipendente dal framework, funzionando perfettamente con Svelte, Vue, Angular e altri ancora.

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 dell'utente, fornendo un'esperienza utente fluida.
  • Visualizzazioni personalizzabili: configura Google Picker in modo che visualizzi solo i tipi di file o le visualizzazioni di cui hai bisogno impostando gli attributi.

Inizia

  1. Installa il componente utilizzando NPM o simili:

    npm i @googleworkspace/drive-picker-element

    È disponibile anche una versione CDN. Per i formati e le versioni disponibili, consulta 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, perché carica automaticamente la libreria Google Picker e la libreria client delle API di 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 Viene attivato quando l'utente seleziona uno o più elementi.
picker-canceled Viene attivato quando l'utente annulla la selezione facendo clic sul pulsante Annulla o chiudendo la finestra di dialogo senza effettuare una selezione.
picker-error Viene 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 il completo 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
      }
    ]
  }
}

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 da the user. 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 immagine 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>

Eseguire una query per i 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 per mostrare solo i file aggiunti a 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.