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 ứng dụng web.
Thành phần web 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 ứng dụng web. Thành phần này gói tất cả logic tải và xác thực API mẫu vào một phần tử HTML. Thành phần 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ể sử dụng thành phần này trong HTML và JavaScript thuần tuý, đồng thời thành phần 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 ứng dụng React, hãy sử 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 ứng dụng web chỉ với 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ã này được cung cấp miễn phí và bạn có thể tuỳ chỉnh mã 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ý quá trình xác thực người dùng, mang lại trải nghiệm người dùng mượt mà.
- 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 thiết lập các thuộc tính.
Bắt đầu
Cài đặt thành phần bằng NPM hoặc tương tự:
npm i @googleworkspace/drive-picker-elementBạ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-elementvà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à thuộc tính
<drive-picker/>và<drive-picker-docs-view/>, hãy xem tài liệu tham khảo về@googleworkspace/drive-picker-element.
Sự kiện
Phần tử <drive-picker/> 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 |
Được 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 |
Được 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
@googleworkspace/drive-picker-element
tài liệu trên NPM.
Chi tiết sự kiện
Đối với sự kiện picker-picked, chi tiết 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ảngDocumentObjectdo người dùng chọn. Mỗi đối tượng chứa các thuộc tính như:
Đối với sự kiện picker-error, event.detail chứa một đối tượng hoặc chuỗi lỗ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 mã mẫu, hãy thay thế những nội dung sau:
PROMPT: danh sách các lời nhắc cấp quyền cho Tài khoản Google phân tách bằng dấu cách và phân biệt chữ hoa chữ thường để 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 gốc cho trình chọn. Ví dụ:
https://developers.google.com. Để biết thêm thông tin, hãy xemPickerBuilder.setOriginphương thức.APP_ID: mã ứng dụng Drive. Để biết thêm thông tin, hãy xem
PickerBuilder.setAppIdphương thức.CLIENT_ID: mã ứng dụng OAuth 2.0. Để biết thêm thông tin, hãy xem 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ị 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 thị 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ị các tệp do người dùng hiện tại sở hữu 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 tệp không có tiêu đề
Lọc chế độ xem để hiển thị các tệp khớp với truy vấn tìm kiếm "Không có tiêu đề" bằ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>
Chủ đề có liên quan
- Để 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-elementtrên GitHub.