Google sử dụng công nghệ AI để dịch nội dung sang ngôn ngữ bạn ưu tiên. Bản dịch bằng AI có thể có lỗi.

Sử dụng thành phần web Google Picker

Thành phần web Google Picker cung cấp một cách khác để tích hợp Google Picker API vào các ứng dụng web của bạn.

Thành phần web này giúp đơn giản hoá việc tích hợp tính năng chọn tệp trên Google Drive vào các ứng dụng web của bạn. Thành phần này gói tất cả logic tải và xác thực API theo mẫu vào một phần tử HTML duy nhất. Thẻ này cho phép bạn thả thẻ <drive-picker> trực tiếp vào mã mà không cần viết logic tải gapi. Bạn có thể dùng công cụ này trong HTML và JavaScript thuần tuý, đồng thời công cụ này cũng không phụ thuộc vào khung, hoạt động liền mạch với Svelte, Vue, Angular và nhiều khung khác.

Để biết thêm thông tin về thư viện thành phần web, hãy xem @googleworkspace/drive-picker-element.

Đối với các ứng dụng React, hãy dùng gói trình bao bọc React chính thức của thành phần web: @googleworkspace/drive-picker-react.

Các tính năng chính

Tích hợp đơn giản: Thêm Google Picker vào các ứng dụng web của bạn chỉ bằng vài dòng mã.
Không phụ thuộc vào khung: Hoạt động liền mạch với mọi khung web mà bạn chọn (React, Vue, Angular, v.v.).
Nguồn mở và có thể tuỳ chỉnh: Mã nguồn được cung cấp miễn phí và bạn có thể tuỳ chỉnh mã nguồn này cho phù hợp với nhu cầu cụ thể của mình.
Hỗ trợ OAuth liền mạch: Tự động xử lý việc xác thực người dùng, mang lại trải nghiệm mượt mà cho người dùng.
Chế độ xem có thể tuỳ chỉnh: Định cấu hình Google Picker để chỉ hiển thị các loại tệp hoặc chế độ xem bạn cần bằng cách đặt các thuộc tính.

Bắt đầu

Cài đặt thành phần bằng NPM hoặc các thành phần tương tự:
```
npm i @googleworkspace/drive-picker-element
```
Bạn cũng có thể sử dụng phiên bản CDN. Để biết các định dạng và phiên bản có sẵn, hãy xem unpkg.
```
<script src="https://unpkg.com/@googleworkspace/drive-picker-element@latest/dist/index.iife.min.js"></script>
```
Nhập các thành phần @googleworkspace/drive-picker-element vào tệp JavaScript:
```
import "@googleworkspace/drive-picker-element";
```
Bạn không cần nhập nếu đang sử dụng phiên bản CDN vì phiên bản này sẽ tự động tải thư viện Google Picker và thư viện ứng dụng Google API dùng để xác thực.
Thêm các phần tử tuỳ chỉnh vào tệp HTML:
```
<drive-picker>
    <drive-picker-docs-view></drive-picker-docs-view>
</drive-picker>
```
Đối với các thuộc tính và đặc điểm <drive-picker/> và <drive-picker-docs-view/>, hãy xem tài liệu tham khảo cho @googleworkspace/drive-picker-element.

Sự kiện

Phần tử <drive-picker/> sẽ gửi các sự kiện tuỳ chỉnh sau:

Sự kiện	Mô tả
`picker-picked`	Được kích hoạt khi người dùng chọn một hoặc nhiều mục.
`picker-canceled`	Kích hoạt khi người dùng huỷ lựa chọn bằng cách nhấp vào nút Huỷ hoặc đóng hộp thoại mà không chọn.
`picker-error`	Kích hoạt khi xảy ra lỗi trong quá trình khởi chạy hoặc chọn tệp.

Để biết thêm thông tin về các sự kiện, hãy xem tài liệu về @googleworkspace/drive-picker-element trên NPM.

Chi tiết sự kiện

Đối với sự kiện picker-picked, thông tin chi tiết về sự kiện chứa toàn bộ 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
      }
    ]
  }
}

Các thuộc tính thường dùng nhất trong đối tượng phản hồi là:

action: hành động đã kích hoạt lệnh gọi lại (ví dụ: PICKED).
docs: một mảng gồm các DocumentObject do người dùng chọn. Mỗi đối tượng chứa các thuộc tính như:
- id: giá trị nhận dạng duy nhất của mặt hàng đã chọn.
- mimeType: loại MIME của mục.
- name: tên của mục.
- url: URL để mở mặt hàng trong Drive.
- sizeBytes: kích thước của mục được chọn tính bằng byte. Giá trị này không được trả về khi một mặt hàng được tải lên.

Đối với sự kiện picker-error, event.detail chứa một đối tượng lỗi hoặc chuỗi mô tả lỗi (ví dụ: ERR_USER_NOT_AUTHENTICATED).

Ví dụ

Các mẫu mã sau đây cho thấy cách sử dụng thành phần web Google Picker cho các trường hợp sử dụng phổ biến. Đối với mỗi đoạn mã mẫu, hãy thay thế những nội dung sau:

PROMPT: danh sách phân tách bằng dấu cách, phân biệt chữ hoa chữ thường gồm các lời nhắc uỷ quyền Tài khoản Google để trình bày cho người dùng. Để biết thêm thông tin, hãy xem TokenClientConfig.prompt.
ORIGIN: tham số nguồn cho bộ chọn. Ví dụ: https://developers.google.com. Để biết thêm thông tin, hãy xem phương thức PickerBuilder.setOrigin.
APP_ID: mã ứng dụng Drive. Để biết thêm thông tin, hãy xem phương thức PickerBuilder.setAppId.
CLIENT_ID: mã ứng dụng OAuth 2.0. Để biết thêm thông tin, hãy xem bài viết Sử dụng OAuth 2.0 để truy cập vào các API của Google.

Tệp PDF

Lọc chế độ xem để chỉ hiển thị các tệp PDF bằng thuộc tính 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>

Tệp hình ảnh và video

Lọc chế độ xem để chỉ hiện các tệp hình ảnh (JPEG, PNG) và video (MP4, QuickTime) bằng thuộc tính 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>

Tệp do tôi sở hữu

Lọc chế độ xem để chỉ hiển thị những tệp thuộc quyền sở hữu của người dùng hiện tại bằng thuộc tính 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>

Truy vấn cho các tệp không có tiêu đề

Lọc chế độ xem để hiện những tệp khớp với cụm từ tìm kiếm "Chưa có tiêu đề" bằng cách sử dụng thuộc tính 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>

Tệp có gắn dấu sao

Lọc chế độ xem để chỉ hiển thị các tệp có gắn dấu sao bằng thuộc tính 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>

Để biết thông tin chi tiết về các thuộc tính, sự kiện và thuộc tính, hãy xem tài liệu đầy đủ về drive-picker-element trên GitHub.

Sử dụng thành phần web Google Picker Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.