Menggunakan komponen web Google Picker

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

Komponen web menyederhanakan integrasi pemilihan file Google Drive ke dalam aplikasi web Anda. Elemen ini menggabungkan semua logika autentikasi dan pemuatan API boilerplate ke dalam satu elemen HTML. Dengan begitu, Anda dapat menempatkan tag <drive-picker> langsung ke dalam kode tanpa perlu menulis logika pemuatan gapi. Library ini dapat digunakan di HTML dan JavaScript biasa, serta tidak bergantung pada framework, sehingga berfungsi lancar dengan 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 Pemilih Google ke aplikasi web Anda dengan beberapa baris kode.
  • Independen dari framework: Berfungsi lancar dengan framework web apa pun yang Anda pilih (React, Vue, Angular, dll.).
  • Open source dan dapat disesuaikan: Kode tersedia secara bebas 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 Pemilih Google untuk menampilkan hanya jenis file atau tampilan yang Anda butuhkan dengan menyetel 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 secara 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 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 memilih.
picker-error Diaktifkan saat terjadi error selama inisialisasi atau pemilihan file.

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

Detail acara

Untuk peristiwa picker-picked, detail peristiwa berisi Google Picker ResponseObject lengkap.

{
  "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:

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 milik saya

Memfilter tampilan untuk hanya menampilkan file yang dimiliki oleh 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 informasi mendalam tentang atribut, peristiwa, dan properti, lihat dokumentasi drive-picker-element lengkap di GitHub.