Menggunakan komponen web Google Picker

Komponen web Google Picker menawarkan cara tambahan untuk mengintegrasikan Google Picker API ke dalam aplikasi web Anda.

Komponen web ini menyederhanakan integrasi pemilihan file Google Drive ke dalam aplikasi web Anda. Komponen ini menggabungkan semua logika pemuatan dan autentikasi API boilerplate ke dalam satu elemen HTML. Komponen ini memungkinkan Anda menempatkan tag <drive-picker> langsung ke dalam kode tanpa perlu menulis logika pemuatan gapi. Komponen ini dapat digunakan dalam HTML dan JavaScript biasa, serta bersifat framework-agnostik, sehingga dapat berfungsi dengan lancar bersama Svelte, Vue, Angular, dan lainnya.

Untuk mengetahui informasi selengkapnya tentang library komponen web, lihat @googleworkspace/drive-picker-element.

Untuk aplikasi React, gunakan paket wrapper React resmi komponen web: @googleworkspace/drive-picker-react.

Fitur utama

  • Integrasi yang mudah: Tambahkan Google Picker ke aplikasi web Anda dengan beberapa baris kode.
  • Independen dari framework: Berfungsi dengan lancar bersama framework web apa pun yang Anda pilih (React, Vue, Angular, dll.).
  • Open source dan dapat disesuaikan: Kode tersedia secara gratis dan Anda dapat menyesuaikannya agar sesuai dengan kebutuhan spesifik Anda.
  • Dukungan OAuth yang lancar: Menangani autentikasi pengguna secara otomatis, sehingga memberikan pengalaman pengguna yang lancar.
  • Tampilan yang dapat disesuaikan: Konfigurasi Google Picker untuk hanya menampilkan jenis file atau tampilan yang Anda butuhkan dengan menetapkan atribut.

Mulai

  1. Instal komponen menggunakan NPM atau yang serupa:

    npm i @googleworkspace/drive-picker-element

    Versi CDN juga tersedia. Untuk mengetahui format dan versi yang tersedia, lihat unpkg.

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

  2. Impor komponen @googleworkspace/drive-picker-element ke dalam file JavaScript Anda:

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

    Impor tidak diperlukan jika Anda menggunakan versi CDN karena versi ini otomatis memuat library Google Picker dan library klien Google API yang digunakan untuk autentikasi.

  3. Tambahkan elemen kustom ke file HTML Anda:

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

    Untuk mengetahui atribut dan properti <drive-picker/> dan <drive-picker-docs-view/>, lihat dokumentasi referensi untuk @googleworkspace/drive-picker-element.

Acara

Elemen <drive-picker/> mengirimkan peristiwa kustom berikut:

Acara Deskripsi
picker-picked Diaktifkan saat pengguna memilih satu atau beberapa item.
picker-canceled Diaktifkan saat pengguna membatalkan pilihan dengan mengklik tombol Batal atau menutup dialog tanpa pilihan.
picker-error Diaktifkan saat terjadi error selama inisialisasi atau pemilihan file.

Untuk mengetahui informasi selengkapnya tentang peristiwa, lihat @googleworkspace/drive-picker-element dokumentasi di NPM.

Detail acara

Untuk peristiwa picker-picked, detail peristiwa berisi Google Picker lengkapResponseObject.

{
  "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
      }
    ]
  }
}

Properti yang paling umum digunakan dalam objek respons adalah:

  • action: tindakan yang memicu callback (misalnya, PICKED).
  • docs: array DocumentObject yang dipilih oleh pengguna. Setiap objek berisi properti seperti:
    • id: ID unik item yang dipilih.
    • mimeType: jenis MIME item.
    • name: nama item.
    • url: URL untuk membuka item di Drive.
    • sizeBytes: ukuran item yang dipilih dalam byte. Nilai tidak ditampilkan saat item diupload.

Untuk peristiwa picker-error, event.detail berisi objek atau string error yang menjelaskan kegagalan (misalnya, ERR_USER_NOT_AUTHENTICATED).

Contoh

Contoh kode berikut menunjukkan cara menggunakan komponen web Google Picker untuk kasus penggunaan umum. Untuk setiap contoh kode, ganti hal berikut:

  • PROMPT: daftar perintah otorisasi Akun Google yang dipisahkan spasi dan peka huruf besar/kecil untuk ditampilkan kepada pengguna. Untuk mengetahui informasi selengkapnya, lihat TokenClientConfig.prompt.

  • ORIGIN: parameter asal untuk pemilih. Misalnya, https://developers.google.com. Untuk mengetahui informasi selengkapnya, lihat PickerBuilder.setOrigin metode.

  • APP_ID: ID aplikasi Drive. Untuk mengetahui informasi selengkapnya, lihat metode PickerBuilder.setAppId.

  • CLIENT_ID: client ID OAuth 2.0. Untuk mengetahui informasi selengkapnya, lihat Menggunakan OAuth 2.0 untuk Mengakses Google API.

File PDF

Memfilter tampilan untuk hanya menampilkan file PDF menggunakan atribut 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 gambar dan video

Memfilter tampilan untuk hanya menampilkan file gambar (JPEG, PNG) dan video (MP4, QuickTime) menggunakan atribut 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 yang saya miliki

Memfilter tampilan untuk hanya menampilkan file yang dimiliki pengguna saat ini menggunakan atribut 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>

Kueri untuk file tanpa judul

Memfilter tampilan untuk menampilkan file yang cocok dengan kueri penelusuran "Tanpa Judul" menggunakan atribut 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 berbintang

Memfilter tampilan untuk hanya menampilkan file berbintang menggunakan atribut 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>
  • Untuk mengetahui informasi mendalam tentang atribut, peristiwa, dan properti, lihat dokumentasi lengkap drive-picker-element di GitHub.