Usar o componente da Web do Google Picker

O componente da Web do Google Picker oferece outra maneira de integrar a API Google Picker aos seus apps da Web.

O componente da Web simplifica a integração da seleção de arquivos do Google Drive aos seus apps da Web. Ele envolve toda a lógica de carregamento e autenticação da API em um único elemento HTML. Ele permite que você insira uma <drive-picker> tag diretamente no seu código sem precisar escrever a gapi lógica de carregamento. Ele pode ser usado em HTML e JavaScript simples e também é independente de framework, funcionando perfeitamente com Svelte, Vue, Angular e muito mais.

Para mais informações sobre a biblioteca de componentes da Web, consulte @googleworkspace/drive-picker-element.

Para apps React, use o pacote wrapper oficial do React do componente da Web: @googleworkspace/drive-picker-react.

Principais recursos

  • Integração direta:adicione o Google Picker aos seus apps da Web com algumas linhas de código.
  • Independente de framework:funciona perfeitamente com qualquer framework da Web que você escolher (React, Vue, Angular etc.).
  • Código aberto e personalizável:o código está disponível sem custo financeiro e pode ser personalizado para atender às suas necessidades específicas.
  • Suporte perfeito ao OAuth:processa a autenticação do usuário automaticamente, proporcionando uma experiência tranquila.
  • Visualizações personalizáveis:configure o Google Picker para mostrar apenas os tipos de arquivo ou visualizações de que você precisa definindo atributos.

Primeiros passos

  1. Instale o componente usando o NPM ou semelhante:

    npm i @googleworkspace/drive-picker-element

    Uma versão de CDN também está disponível. Para formatos e versões disponíveis, consulte unpkg.

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

  2. Importe os componentes @googleworkspace/drive-picker-element para o arquivo JavaScript:

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

    A importação não é necessária se você estiver usando a versão de CDN, porque ela carrega automaticamente a biblioteca do Google Picker e a biblioteca de cliente da API Google usada para autenticação.

  3. Adicione os elementos personalizados ao arquivo HTML:

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

    Para atributos e propriedades <drive-picker/> e <drive-picker-docs-view/>, consulte a documentação de referência do @googleworkspace/drive-picker-element.

Eventos

O elemento <drive-picker/> envia os seguintes eventos personalizados:

Evento Descrição
picker-picked Acionado quando o usuário seleciona um ou mais itens.
picker-canceled Acionado quando o usuário cancela a seleção clicando no botão "Cancelar" ou fechando a caixa de diálogo sem uma seleção.
picker-error Acionado quando ocorre um erro durante a inicialização ou a seleção de arquivos.

Para mais informações sobre eventos, consulte a @googleworkspace/drive-picker-element documentação no NPM.

Detalhes do evento

Para o evento picker-picked, o detalhe do evento contém o 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
      }
    ]
  }
}

As propriedades usadas com frequência no objeto de resposta são:

  • action: a ação que acionou o callback (por exemplo, PICKED).
  • docs: uma matriz de DocumentObjects selecionados por o usuário. Cada objeto contém propriedades como:
    • id: o identificador exclusivo do item selecionado.
    • mimeType: o tipo MIME do item.
    • name: o nome do item.
    • url: o URL para abrir o item no Drive.
    • sizeBytes: o tamanho do item escolhido em bytes. O valor não é retornado quando um item é enviado por upload.

Para o evento picker-error, event.detail contém um objeto de erro ou uma string que descreve a falha (por exemplo, ERR_USER_NOT_AUTHENTICATED).

Exemplos

Os exemplos de código a seguir mostram como usar o componente da Web do Google Picker para casos de uso comuns. Para cada exemplo de código, substitua o seguinte:

Arquivos PDF

Filtra a visualização para mostrar apenas arquivos PDF usando o 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>

Arquivos de imagem e vídeo

Filtra a visualização para mostrar apenas arquivos de imagem (JPEG, PNG) e vídeo (MP4, QuickTime) usando o 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>

Arquivos de minha propriedade

Filtra a visualização para mostrar apenas arquivos de propriedade do usuário atual usando o 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 arquivos sem título

Filtra a visualização para mostrar arquivos que correspondem à consulta de pesquisa "Sem título" usando o 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>

Arquivos com estrela

Filtra a visualização para mostrar apenas arquivos com estrela usando o 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 informações detalhadas sobre atributos, eventos e propriedades, consulte a documentação completa drive-picker-element no GitHub.