Google Seçici web bileşenini kullanma

Google Picker web bileşeni, Google Picker API'yi web uygulamalarınıza entegre etmenin ek bir yolunu sunar.

Web bileşeni, Google Drive dosya seçimini web uygulamalarınıza entegre etmeyi kolaylaştırır. Tüm standart API yükleme ve kimlik doğrulama mantığını tek bir HTML öğesinde kapsar. <drive-picker> yükleme mantığını yazmanıza gerek kalmadan doğrudan kodunuza bir gapi etiketi bırakmanıza olanak tanır. Düz HTML ve JavaScript'te kullanılabilir. Ayrıca çerçeveye bağlı değildir ve Svelte, Vue, Angular gibi çerçevelerle sorunsuz bir şekilde çalışır.

Web bileşeni kitaplığı hakkında daha fazla bilgi için @googleworkspace/drive-picker-element başlıklı makaleye bakın.

React uygulamaları için web bileşeninin resmi React sarmalayıcı paketini kullanın: @googleworkspace/drive-picker-react.

Temel özellikler

  • Kolay entegrasyon: Birkaç satır kodla Google Picker'ı web uygulamalarınıza ekleyin.
  • Çerçeveden bağımsız: Seçtiğiniz herhangi bir web çerçevesiyle (React, Vue, Angular vb.) sorunsuz çalışır.
  • Açık kaynaklı ve özelleştirilebilir: Kod ücretsiz olarak kullanılabilir ve özel ihtiyaçlarınıza uyacak şekilde özelleştirilebilir.
  • Sorunsuz OAuth desteği: Kullanıcı kimlik doğrulamasını otomatik olarak gerçekleştirerek sorunsuz bir kullanıcı deneyimi sağlar.
  • Özelleştirilebilir görünümler: Google Seçici'yi, yalnızca ihtiyacınız olan dosya türlerini veya görünümleri gösterecek şekilde yapılandırmak için özellikleri ayarlayın.

Başlayın

  1. NPM veya benzeri bir araç kullanarak bileşeni yükleyin:

    npm i @googleworkspace/drive-picker-element

    CDN sürümü de mevcuttur. Kullanılabilir biçimler ve sürümler için unpkg bölümüne bakın.

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

  2. @googleworkspace/drive-picker-element bileşenlerini JavaScript dosyanıza aktarın:

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

    CDN sürümünü kullanıyorsanız Google Picker kitaplığını ve kimlik doğrulama için kullanılan Google API istemci kitaplığını otomatik olarak yüklediğinden içe aktarma işlemi gerekli değildir.

  3. Özel öğeleri HTML dosyanıza ekleyin:

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

    <drive-picker/> ve <drive-picker-docs-view/> özellikleri ve nitelikleri için @googleworkspace/drive-picker-element ile ilgili referans belgelerine bakın.

Etkinlikler

<drive-picker/> öğesi aşağıdaki özel etkinlikleri gönderir:

Etkinlik Açıklama
picker-picked Kullanıcı bir veya daha fazla öğe seçtiğinde tetiklenir.
picker-canceled Kullanıcı, İptal düğmesini tıklayarak veya seçim yapmadan iletişim kutusunu kapatarak seçimi iptal ettiğinde tetiklenir.
picker-error İlk kullanıma hazırlama veya dosya seçimi sırasında bir hata oluştuğunda tetiklenir.

Etkinlikler hakkında daha fazla bilgi için NPM'deki @googleworkspace/drive-picker-element belgelere bakın.

Etkinlik ayrıntıları

picker-picked etkinliğinde, etkinlik ayrıntısı tam Google Picker'ı ResponseObject içerir.

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

Yanıt nesnesinde en çok tercih edilen özellikler şunlardır:

  • action: Geri çağırmayı tetikleyen işlem (örneğin, PICKED).
  • docs: Kullanıcı tarafından seçilen DocumentObject dizisi. Her nesne aşağıdaki gibi özellikleri içerir:
    • id: Seçilen öğenin benzersiz tanımlayıcısı.
    • mimeType: Öğenin MIME türü.
    • name: Öğenin adı.
    • url: Öğeyi Drive'da açmak için kullanılan URL.
    • sizeBytes: Seçilen öğenin bayt cinsinden boyutu. Bir öğe yüklendiğinde değer döndürülmez.

picker-error etkinliği için event.detail, hatayı açıklayan bir hata nesnesi veya dize içerir (örneğin, ERR_USER_NOT_AUTHENTICATED).

Örnekler

Aşağıdaki kod örneklerinde, Google Picker web bileşeninin yaygın kullanım alanlarında nasıl kullanılacağı gösterilmektedir. Her kod örneğinde aşağıdakileri değiştirin:

PDF dosyaları

Görünümü, yalnızca mime-types özelliğini kullanan PDF dosyalarını gösterecek şekilde filtreler.

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

Resim ve video dosyaları

Görünümü, yalnızca mime-types özelliği kullanılarak resim (JPEG, PNG) ve video (MP4, QuickTime) dosyalarını gösterecek şekilde filtreler.

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

Sahibi olduğum dosyalar

Görünümü, owned-by-me özelliği kullanılarak yalnızca geçerli kullanıcıya ait dosyaları gösterecek şekilde filtreler.

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

Başlıksız dosyalar için sorgu

Görünümü, query özelliğini kullanarak "Untitled" arama sorgusuyla eşleşen dosyaları gösterecek şekilde filtreler.

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

Yıldız işaretli dosyalar

Görünümü, yalnızca starred özelliği kullanılarak yıldızlanmış dosyaları gösterecek şekilde filtreler.

<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>
  • Özellikler, etkinlikler ve özellikler hakkında ayrıntılı bilgi için GitHub'daki drive-picker-element belgelerin tamamına bakın.