ใช้คอมโพเนนต์เว็บของ Google Picker

คอมโพเนนต์เว็บ Google Picker เป็นอีกวิธีหนึ่งในการผสานรวม Google Picker API เข้ากับเว็บแอป

คอมโพเนนต์เว็บช่วยลดความซับซ้อนในการผสานรวมการเลือกไฟล์จาก Google ไดรฟ์เข้ากับเว็บแอป โดยจะรวมตรรกะการโหลดและการตรวจสอบสิทธิ์ API ที่ซ้ำซ้อนทั้งหมดไว้ในองค์ประกอบ HTML เดียว ซึ่งช่วยให้คุณวางแท็ก <drive-picker> ลงใน โค้ดได้โดยตรงโดยไม่ต้องเขียนตรรกะการโหลด gapi คอมโพเนนต์นี้สามารถใช้ใน HTML และ JavaScript ธรรมดาได้ และยังไม่ขึ้นอยู่กับเฟรมเวิร์ก จึงทำงานร่วมกับ Svelte, Vue, Angular และอื่นๆ ได้อย่างราบรื่น

ดูข้อมูลเพิ่มเติมเกี่ยวกับไลบรารีคอมโพเนนต์เว็บได้ที่ @googleworkspace/drive-picker-element

สำหรับแอป React ให้ใช้แพ็กเกจ React Wrapper อย่างเป็นทางการของคอมโพเนนต์เว็บ: @googleworkspace/drive-picker-react

ฟีเจอร์หลัก

  • การผสานรวมที่ตรงไปตรงมา: เพิ่ม Google Picker ลงในเว็บแอปด้วยโค้ดเพียงไม่กี่บรรทัด
  • ไม่ขึ้นอยู่กับเฟรมเวิร์ก: ทำงานร่วมกับเฟรมเวิร์กเว็บที่คุณเลือกได้อย่างราบรื่น (React, Vue, Angular ฯลฯ)
  • โอเพนซอร์สและปรับแต่งได้: โค้ดพร้อมใช้งานฟรีและคุณสามารถปรับแต่งให้เหมาะกับความต้องการเฉพาะของคุณได้
  • รองรับ OAuth ได้อย่างราบรื่น: จัดการการตรวจสอบสิทธิ์ของผู้ใช้โดยอัตโนมัติ ทำให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ราบรื่น
  • มุมมองที่ปรับแต่งได้: กำหนดค่า Google Picker ให้แสดงเฉพาะประเภทไฟล์หรือมุมมองที่คุณต้องการโดยการตั้งค่าแอตทริบิวต์

เริ่มต้นใช้งาน

  1. ติดตั้งคอมโพเนนต์โดยใช้ NPM หรือเครื่องมือที่คล้ายกัน

    npm i @googleworkspace/drive-picker-element

    นอกจากนี้ยังมีเวอร์ชัน CDN ให้ใช้งานด้วย ดูรูปแบบและเวอร์ชันที่พร้อมใช้งานได้ที่ unpkg

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

  2. นำเข้าคอมโพเนนต์ @googleworkspace/drive-picker-element ลงในไฟล์ JavaScript

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

    คุณไม่จำเป็นต้องนำเข้าหากใช้เวอร์ชัน CDN เนื่องจากระบบจะโหลดไลบรารี Google Picker และไลบรารีของไคลเอ็นต์ Google API ที่ใช้สำหรับการตรวจสอบสิทธิ์โดยอัตโนมัติ

  3. เพิ่มองค์ประกอบที่กำหนดเองลงในไฟล์ HTML

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

    ดูแอตทริบิวต์และพร็อพเพอร์ตี้ของ <drive-picker/> และ <drive-picker-docs-view/> ได้ในเอกสารอ้างอิงสำหรับ @googleworkspace/drive-picker-element

กิจกรรม

องค์ประกอบ <drive-picker/> จะส่งกิจกรรมที่กำหนดเองต่อไปนี้

กิจกรรม คำอธิบาย
picker-picked ทริกเกอร์เมื่อผู้ใช้เลือกอย่างน้อย 1 รายการ
picker-canceled ทริกเกอร์เมื่อผู้ใช้ยกเลิกการเลือกโดยคลิกปุ่ม "ยกเลิก" หรือปิดกล่องโต้ตอบโดยไม่ได้เลือก
picker-error ทริกเกอร์เมื่อเกิดข้อผิดพลาดระหว่างการเริ่มต้นหรือการเลือกไฟล์

ดูข้อมูลเพิ่มเติมเกี่ยวกับกิจกรรมได้ใน @googleworkspace/drive-picker-element เอกสารประกอบใน NPM

รายละเอียดกิจกรรม

สำหรับกิจกรรม picker-picked รายละเอียดกิจกรรมจะมี Google Picker แบบเต็ม 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
      }
    ]
  }
}

พร็อพเพอร์ตี้ที่ใช้กันโดยทั่วไปในออบเจ็กต์การตอบกลับ ได้แก่

  • action: การดำเนินการที่ทริกเกอร์การเรียกกลับ (เช่น PICKED)
  • docs: อาร์เรย์ของ DocumentObject ที่ผู้ใช้เลือก โดยแต่ละออบเจ็กต์จะมีพร็อพเพอร์ตี้ เช่น
    • id: ตัวระบุที่ไม่ซ้ำกันของรายการที่เลือก
    • mimeType: ประเภท MIME ของรายการ
    • name: ชื่อของรายการ
    • url: URL สำหรับเปิดรายการในไดรฟ์
    • sizeBytes: ขนาดของรายการที่เลือกเป็นไบต์ ระบบจะไม่แสดงผลค่าเมื่อมีการอัปโหลดรายการ

สำหรับกิจกรรม picker-error นั้น event.detail จะมีออบเจ็กต์หรือสตริงข้อผิดพลาดที่อธิบายถึงความล้มเหลว (เช่น ERR_USER_NOT_AUTHENTICATED)

ตัวอย่าง

ตัวอย่างโค้ดต่อไปนี้แสดงวิธีใช้คอมโพเนนต์เว็บ Google Picker สำหรับ Use Case ทั่วไป โดยให้แทนที่ข้อมูลต่อไปนี้ในตัวอย่างโค้ดแต่ละรายการ

  • PROMPT: รายการพรอมต์การให้สิทธิ์บัญชี Google ที่คั่นด้วยช่องว่างและคำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่เพื่อแสดงต่อผู้ใช้ ดูข้อมูลเพิ่มเติมได้ที่ TokenClientConfig.prompt

  • ORIGIN: พารามิเตอร์ Origin สำหรับ Picker เช่น https://developers.google.com ดูข้อมูลเพิ่มเติมได้ที่ PickerBuilder.setOrigin เมธอด

  • APP_ID: รหัสแอปไดรฟ์ ดูข้อมูลเพิ่มเติมได้ที่ เมธอด PickerBuilder.setAppId

  • CLIENT_ID: รหัสไคลเอ็นต์ OAuth 2.0 ดูข้อมูลเพิ่มเติมได้ที่ หัวข้อการใช้ OAuth 2.0 เพื่อเข้าถึง Google APIs

ไฟล์ PDF

กรองมุมมองให้แสดงเฉพาะไฟล์ PDF โดยใช้แอตทริบิวต์ 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>

ไฟล์รูปภาพและวิดีโอ

กรองมุมมองให้แสดงเฉพาะไฟล์รูปภาพ (JPEG, PNG) และวิดีโอ (MP4, QuickTime) โดยใช้แอตทริบิวต์ 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>

ไฟล์ที่ฉันเป็นเจ้าของ

กรองมุมมองให้แสดงเฉพาะไฟล์ที่ผู้ใช้ปัจจุบันเป็นเจ้าของโดยใช้แอตทริบิวต์ 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>

ค้นหาไฟล์ที่ไม่มีชื่อ

กรองมุมมองให้แสดงไฟล์ที่ตรงกับคำค้นหา "ไม่มีชื่อ" โดยใช้แอตทริบิวต์ 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>

ไฟล์ที่ติดดาว

กรองมุมมองให้แสดงเฉพาะไฟล์ที่ติดดาวโดยใช้แอตทริบิวต์ 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>
  • ดูข้อมูลเชิงลึกเกี่ยวกับแอตทริบิวต์ กิจกรรม และพร็อพเพอร์ตี้ได้ในเอกสารประกอบฉบับเต็ม drive-picker-element ใน GitHub