Korzystanie z komponentu internetowego selektora Google

Komponent internetowy Google Picker to dodatkowy sposób na zintegrowanie interfejsu Google Picker API z aplikacjami internetowymi.

Komponent internetowy ułatwia integrowanie wyboru plików z Dysku Google z aplikacjami internetowymi. Zawiera ona całą standardową logikę wczytywania interfejsu API i uwierzytelniania w jednym elemencie HTML. Umożliwia umieszczenie tagu <drive-picker> bezpośrednio w kodzie bez konieczności pisania logiki wczytywania gapi. Można go używać w zwykłym HTML-u i JavaScript, a także w dowolnej architekturze, ponieważ działa bezproblemowo z Svelte, Vue, Angular i innymi.

Więcej informacji o bibliotece komponentów internetowych znajdziesz w artykule @googleworkspace/drive-picker-element.

W przypadku aplikacji React użyj oficjalnego pakietu React wrapper komponentu internetowego:@googleworkspace/drive-picker-react.

Najważniejsze funkcje

  • Prosta integracja: dodaj selektor Google do aplikacji internetowych za pomocą kilku wierszy kodu.
  • Niezależność od platformy: działa bezproblemowo z dowolną wybraną platformą internetową (React, Vue, Angular itp.).
  • Oprogramowanie open source z możliwością dostosowania: kod jest dostępny bezpłatnie i możesz go dostosować do swoich potrzeb.
  • Bezproblemowa obsługa OAuth: automatycznie obsługuje uwierzytelnianie użytkowników, zapewniając im wygodę.
  • Widoki z możliwością dostosowania: skonfiguruj selektor Google tak, aby wyświetlał tylko potrzebne typy plików lub widoki, ustawiając atrybuty.

Rozpocznij

  1. Zainstaluj komponent za pomocą NPM lub podobnego narzędzia:

    npm i @googleworkspace/drive-picker-element

    Dostępna jest też wersja CDN. Dostępne formaty i wersje znajdziesz w unpkg.

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

  2. Zaimportuj komponenty @googleworkspace/drive-picker-element do pliku JavaScript:

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

    Importowanie nie jest wymagane, jeśli używasz wersji CDN, ponieważ automatycznie wczytuje ona bibliotekę Google Picker i bibliotekę klienta interfejsu API Google używaną do uwierzytelniania.

  3. Dodaj elementy niestandardowe do pliku HTML:

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

    Informacje o atrybutach i właściwościach <drive-picker/> i <drive-picker-docs-view/> znajdziesz w dokumentacji referencyjnej @googleworkspace/drive-picker-element.

Wydarzenia

Element <drive-picker/> wysyła te zdarzenia niestandardowe:

Zdarzenie Opis
picker-picked Wywoływane, gdy użytkownik wybierze co najmniej 1 element.
picker-canceled Uruchamiane, gdy użytkownik anuluje wybór, klikając przycisk Anuluj lub zamykając okno bez dokonania wyboru.
picker-error Uruchamiane, gdy podczas inicjalizacji lub wybierania pliku wystąpi błąd.

Więcej informacji o zdarzeniach znajdziesz w @googleworkspace/drive-picker-elementdokumentacji na platformie NPM.

Szczegóły wydarzenia

W przypadku zdarzenia picker-picked szczegóły zdarzenia zawierają pełną nazwę 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
      }
    ]
  }
}

Najczęściej używane właściwości w obiekcie odpowiedzi to:

  • action: działanie, które wywołało wywołanie zwrotne (np. PICKED).
  • docs: tablica obiektów DocumentObject wybranych przez użytkownika. Każdy obiekt zawiera właściwości takie jak:
    • id: unikalny identyfikator wybranego produktu.
    • mimeType: typ MIME elementu.
    • name: nazwa elementu.
    • url: adres URL, który otwiera element na Dysku.
    • sizeBytes: rozmiar wybranego elementu w bajtach. Wartość nie jest zwracana, gdy przesyłany jest produkt.

W przypadku zdarzenia picker-error zmienna event.detail zawiera obiekt błędu lub ciąg znaków opisujący błąd (np. ERR_USER_NOT_AUTHENTICATED).

Przykłady

Poniższe przykłady kodu pokazują, jak używać komponentu internetowego Google Picker w typowych przypadkach. W każdym przykładzie kodu zastąp te elementy:

Pliki PDF

Filtruje widok, aby wyświetlać tylko pliki PDF, za pomocą atrybutu 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>

Pliki graficzne i wideo

Filtruje widok, aby wyświetlać tylko pliki graficzne (JPEG, PNG) i wideo (MP4, QuickTime) za pomocą atrybutu 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>

Pliki należące do mnie

Filtruje widok, aby wyświetlać tylko pliki, których właścicielem jest bieżący użytkownik, za pomocą atrybutu 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>

Zapytanie dotyczące plików bez nazwy

Filtruje widok, aby wyświetlać pliki pasujące do zapytania „Bez tytułu” przy użyciu atrybutu 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>

Pliki oznaczone gwiazdką

Filtruje widok, aby wyświetlać tylko pliki oznaczone gwiazdką, za pomocą atrybutu 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>