ใช้คอมโพเนนต์เว็บของ 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	เริ่มทำงานเมื่อเกิดข้อผิดพลาดระหว่างการเริ่มต้นหรือการเลือกไฟล์

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

รายละเอียดเหตุการณ์

สำหรับ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: พารามิเตอร์ต้นทางสำหรับเครื่องมือเลือก เช่น 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