Giao diện
@digiforce-nc/plugin-field-attachment-url
Plugin cung cấp kiểu field URL attachment — cho phép đính kèm file thông qua URL từ hệ thống file manager, tích hợp public storage để hiển thị trực tiếp.
Plugin này làm gì?
Hãy hình dung: bạn đã upload file lên hệ thống qua plugin-file-manager và muốn đính kèm file đó vào bản ghi mà không cần upload lại. Plugin này cung cấp field cho phép chọn file từ các collection có public storage, lưu URL tham chiếu và hiển thị preview.
Hai nhiệm vụ chính
| # | Nhiệm vụ | Chi tiết |
|---|---|---|
| 1 | Liệt kê file collections | Server action truy vấn danh sách collection có public storage khả dụng |
| 2 | Đính kèm & hiển thị | Client component cho phép chọn file, lưu URL, hiển thị preview |
Kiến trúc
Tổng quan
Plugin có cả server (action endpoint) và client (UI component). Server cung cấp endpoint để lấy danh sách file collection có public storage. Client hiển thị giao diện chọn và xem file.
Luồng hoạt động chi tiết
Server action
| Action | Method | Mô tả |
|---|---|---|
collections:listFileCollectionsWithPublicStorage | GET | Trả về danh sách collection được cấu hình public storage, dùng để populate dropdown chọn file |
Field Interface
| Thuộc tính | Giá trị |
|---|---|
| name | attachmentURL |
| type | string |
| group | media |
| Mô tả | Lưu URL tham chiếu đến file trong hệ thống file manager |
Components
| Component | Chức năng |
|---|---|
AttachmentUrl | Component chính — hiển thị input URL + preview, cho phép chọn từ file collection |
AttachmentURLFieldWidget | Widget wrapper đăng ký vào schema component |
Ví dụ sử dụng
Cấu hình field attachment URL
typescript
const attachmentField = {
name: 'contractFile',
type: 'string',
interface: 'attachmentURL',
uiSchema: {
type: 'string',
title: 'File hợp đồng',
'x-component': 'AttachmentUrl',
},
};Gọi API lấy danh sách file collections
typescript
const response = await api.resource('collections').listFileCollectionsWithPublicStorage();
const collections = response.data.data;
// collections = [{ name: 'attachments', storage: { type: 's3', baseUrl: '...' } }, ...]Thành phần client
| Thành phần | Mô tả |
|---|---|
AttachmentURLFieldInterface | Định nghĩa interface cho field attachment URL |
AttachmentUrl | Component hiển thị và chọn file |
AttachmentURLFieldWidget | Widget đăng ký vào SchemaComponentManager |
Dependencies
| Package | Vai trò |
|---|---|
@digiforce-nc/client | Client framework — đăng ký component |
@digiforce-nc/server | Server framework — đăng ký action |
@digiforce-nc/plugin-file-manager | Quản lý file và storage — plugin phụ thuộc |