@libs-ui/components-inputs-upload 0.2.355-13 → 0.2.355-15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +155 -2
- package/package.json +14 -14
package/README.md
CHANGED
|
@@ -1,3 +1,156 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Upload Component
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
`@libs-ui/components-inputs-upload` là một thành phần mạnh mẽ dùng để xử lý việc tải lên tệp tin. Nó hỗ trợ nhiều loại tệp (hình ảnh, video, âm thanh, tài liệu), tải lên nhiều tệp cùng lúc, kéo thả, chỉnh sửa hình ảnh trực tiếp và xem trước tệp.
|
|
4
|
+
|
|
5
|
+
## Tính năng nổi bật
|
|
6
|
+
|
|
7
|
+
- 📁 **Multi-format Support**: Hỗ trợ `image`, `video`, `audio`, `document` và các tổ hợp của chúng.
|
|
8
|
+
- 🖱️ **Drag & Drop**: Hỗ trợ kéo thả tệp tin trực tiếp vào vùng tải lên.
|
|
9
|
+
- 🖼️ **Image Editor**: Tích hợp trình chỉnh sửa ảnh (cắt, xoay) trước khi lưu.
|
|
10
|
+
- 🔍 **File Preview**: Xem trước hình ảnh qua Gallery Viewer và các tài liệu khác qua Preview File component.
|
|
11
|
+
- 👤 **Avatar Mode**: Hỗ trợ chế độ chọn một hình ảnh làm ảnh đại diện (isAvatar).
|
|
12
|
+
- 📏 **Size & Limit Control**: Kiểm soát kích thước tệp tối đa (theo từng loại), tổng kích thước và số lượng tệp tối đa.
|
|
13
|
+
- 🎨 **Display Modes**: Hỗ trợ hai chế độ hiển thị danh sách tệp: `full` (chi tiết) và `short` (gọn nhẹ).
|
|
14
|
+
- 🔗 **Sample Download**: Hỗ trợ nút tải tệp mẫu đi kèm.
|
|
15
|
+
- 🛡️ **Signal Based**: Sử dụng Angular Signals để quản lý trạng thái tệp và cấu hình mượt mà.
|
|
16
|
+
|
|
17
|
+
## Cài đặt
|
|
18
|
+
|
|
19
|
+
Sử dụng npm hoặc yarn để cài đặt:
|
|
20
|
+
|
|
21
|
+
```bash
|
|
22
|
+
npm install @libs-ui/components-inputs-upload
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
## Cách sử dụng
|
|
26
|
+
|
|
27
|
+
### Import Module
|
|
28
|
+
|
|
29
|
+
```typescript
|
|
30
|
+
import { LibsUiComponentsInputsUploadComponent } from '@libs-ui/components-inputs-upload';
|
|
31
|
+
|
|
32
|
+
@Component({
|
|
33
|
+
standalone: true,
|
|
34
|
+
imports: [LibsUiComponentsInputsUploadComponent],
|
|
35
|
+
// ...
|
|
36
|
+
})
|
|
37
|
+
export class YourComponent {}
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
### Ví dụ cơ bản (Tải lên hình ảnh)
|
|
41
|
+
|
|
42
|
+
```html
|
|
43
|
+
<libs_ui-components-inputs-upload
|
|
44
|
+
[fileType]="'image'"
|
|
45
|
+
[multiple]="true"
|
|
46
|
+
[limitFile]="5"
|
|
47
|
+
(outFileChanged)="handleFileChanged($event)"></libs_ui-components-inputs-upload>
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
### Chế độ Avatar và Chỉnh sửa ảnh
|
|
51
|
+
|
|
52
|
+
```html
|
|
53
|
+
<libs_ui-components-inputs-upload
|
|
54
|
+
[fileType]="'image'"
|
|
55
|
+
[canSetAvatar]="true"
|
|
56
|
+
[aspectRatio]="{ width: 1, height: 1 }"
|
|
57
|
+
[multiple]="false"
|
|
58
|
+
(outFileChanged)="onAvatarChanged($event)"></libs_ui-components-inputs-upload>
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
## API Reference
|
|
62
|
+
|
|
63
|
+
### Inputs
|
|
64
|
+
|
|
65
|
+
| Thuộc tính | Kiểu dữ liệu | Mặc định | Mô tả |
|
|
66
|
+
| :------------------------- | :-------------------------------- | :----------------------- | :------------------------------------------------- |
|
|
67
|
+
| `fileType` | `TYPE_FILE_UPLOAD` | `'image_video_document'` | Các loại tệp được phép tải lên. |
|
|
68
|
+
| `multiple` | `boolean` | `false` | Cho phép chọn nhiều tệp. |
|
|
69
|
+
| `limitFile` | `number` | `10` | Số lượng tệp tối đa được phép. |
|
|
70
|
+
| `maxTotalSize` | `number` | `10MB` | Tổng dung lượng tối đa của tất cả các tệp (bytes). |
|
|
71
|
+
| `maxImageSize` | `number` | `5MB` | Dung lượng tối đa cho 1 file ảnh. |
|
|
72
|
+
| `maxVideoSize` | `number` | `10MB` | Dung lượng tối đa cho 1 file video. |
|
|
73
|
+
| `maxDocumentSize` | `number` | `10MB` | Dung lượng tối đa cho 1 file tài liệu. |
|
|
74
|
+
| `canSetAvatar` | `boolean` | `false` | Hiển thị nút chọn ảnh đại diện cho các file ảnh. |
|
|
75
|
+
| `aspectRatio` | `IAspectRatio` | `undefined` | Tỉ lệ khung hình cố định khi chỉnh sửa ảnh. |
|
|
76
|
+
| `modeDisplayFile` | `'full' \| 'short'` | `'full'` | Chế độ hiển thị danh sách tệp đã chọn. |
|
|
77
|
+
| `hasClearSearch` | `boolean` | `false` | (Chỉ dành cho search input, không áp dụng ở đây). |
|
|
78
|
+
| `labelConfig` | `ILabel` | `undefined` | Cấu hình nhãn phía trên vùng upload. |
|
|
79
|
+
| `configDownloadSampleFile` | `IUploadConfigDownloadSampleFile` | `undefined` | Cấu hình nút tải tệp mẫu. |
|
|
80
|
+
|
|
81
|
+
### Outputs
|
|
82
|
+
|
|
83
|
+
| Sự kiện | Kiểu dữ liệu | Mô tả |
|
|
84
|
+
| :-------------------- | :----------------------------- | :------------------------------------------------------------------------------- |
|
|
85
|
+
| `outFileChanged` | `Array<WritableSignal<IFile>>` | Phát ra danh sách tệp mỗi khi có sự thay đổi (thêm, xóa, sửa). |
|
|
86
|
+
| `outFileRemoved` | `WritableSignal<IFile>` | Phát ra tệp bị xóa khỏi danh sách. |
|
|
87
|
+
| `outFunctionsControl` | `IUploadFunctionControlEvent` | Cung cấp các phương thức điều khiển (validate, removeAll, handlerUploadFile...). |
|
|
88
|
+
|
|
89
|
+
### Methods (via outFunctionsControl)
|
|
90
|
+
|
|
91
|
+
- `checkIsValid()`: Kiểm tra tính hợp lệ của danh sách tệp hiện tại.
|
|
92
|
+
- `removeAll()`: Xóa sạch danh sách tệp.
|
|
93
|
+
- `handlerUploadFile()`: Kích hoạt cửa sổ chọn tệp của trình duyệt.
|
|
94
|
+
|
|
95
|
+
## Types & Interfaces
|
|
96
|
+
|
|
97
|
+
### TYPE_FILE_UPLOAD
|
|
98
|
+
|
|
99
|
+
Định nghĩa các tập hợp định dạng tệp được phép.
|
|
100
|
+
|
|
101
|
+
```typescript
|
|
102
|
+
export type TYPE_FILE_UPLOAD =
|
|
103
|
+
| 'document'
|
|
104
|
+
| 'image'
|
|
105
|
+
| 'video'
|
|
106
|
+
| 'audio'
|
|
107
|
+
| 'image_document'
|
|
108
|
+
| 'image_video'
|
|
109
|
+
| 'image_audio'
|
|
110
|
+
| 'document_audio'
|
|
111
|
+
| 'video_audio'
|
|
112
|
+
| 'image_document_audio'
|
|
113
|
+
| 'image_video_audio'
|
|
114
|
+
| 'document_video_audio'
|
|
115
|
+
| 'image_video_document'
|
|
116
|
+
| 'image_audio_video_document';
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
### IUploadConfigDownloadSampleFile
|
|
120
|
+
|
|
121
|
+
Cấu hình cho nút tải xuống tệp mẫu.
|
|
122
|
+
|
|
123
|
+
```typescript
|
|
124
|
+
export interface IUploadConfigDownloadSampleFile {
|
|
125
|
+
position?: 'top' | 'bottom';
|
|
126
|
+
title: string;
|
|
127
|
+
url?: string;
|
|
128
|
+
classLabel?: string;
|
|
129
|
+
classInclude?: string;
|
|
130
|
+
classIconLeftInclude?: string;
|
|
131
|
+
callBack?: () => void;
|
|
132
|
+
}
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
### IUploadFunctionControlEvent
|
|
136
|
+
|
|
137
|
+
Giao diện điều khiển component bên ngoài.
|
|
138
|
+
|
|
139
|
+
```typescript
|
|
140
|
+
export interface IUploadFunctionControlEvent {
|
|
141
|
+
checkIsValid: () => Promise<boolean>;
|
|
142
|
+
removeAll: () => Promise<void>;
|
|
143
|
+
uploading: (process: IHttpProcessUpload, id: string) => Promise<void>;
|
|
144
|
+
setMessageError: (message: string, id?: string) => Promise<void>;
|
|
145
|
+
handlerUploadFile: () => Promise<void>;
|
|
146
|
+
}
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
## Tech Stack
|
|
150
|
+
|
|
151
|
+
- **Core**: Angular 18+, Signals, RxJS
|
|
152
|
+
- **Dependencies**: `@libs-ui/components-buttons-button`, `@libs-ui/components-gallery`, `@libs-ui/components-image-editor`, `@libs-ui/components-label`, `@libs-ui/components-preview-file`, `@libs-ui/services-dynamic-component`.
|
|
153
|
+
|
|
154
|
+
## License
|
|
155
|
+
|
|
156
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,23 +1,23 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@libs-ui/components-inputs-upload",
|
|
3
|
-
"version": "0.2.355-
|
|
3
|
+
"version": "0.2.355-15",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@angular/common": ">=18.0.0",
|
|
6
6
|
"@angular/core": ">=18.0.0",
|
|
7
|
-
"@libs-ui/components-spinner": "0.2.355-
|
|
8
|
-
"@libs-ui/icons": "0.2.355-
|
|
9
|
-
"@libs-ui/interfaces-types": "0.2.355-
|
|
10
|
-
"@libs-ui/pipes-security-trust": "0.2.355-
|
|
11
|
-
"@libs-ui/utils": "0.2.355-
|
|
7
|
+
"@libs-ui/components-spinner": "0.2.355-15",
|
|
8
|
+
"@libs-ui/icons": "0.2.355-15",
|
|
9
|
+
"@libs-ui/interfaces-types": "0.2.355-15",
|
|
10
|
+
"@libs-ui/pipes-security-trust": "0.2.355-15",
|
|
11
|
+
"@libs-ui/utils": "0.2.355-15",
|
|
12
12
|
"@ngx-translate/core": "^15.0.0",
|
|
13
|
-
"@libs-ui/components-buttons-button": "0.2.355-
|
|
14
|
-
"@libs-ui/components-gallery": "0.2.355-
|
|
15
|
-
"@libs-ui/components-image-editor": "0.2.355-
|
|
16
|
-
"@libs-ui/components-label": "0.2.355-
|
|
17
|
-
"@libs-ui/components-preview-file": "0.2.355-
|
|
18
|
-
"@libs-ui/components-scroll-overlay": "0.2.355-
|
|
19
|
-
"@libs-ui/services-dynamic-component": "0.2.355-
|
|
20
|
-
"@libs-ui/services-notification": "0.2.355-
|
|
13
|
+
"@libs-ui/components-buttons-button": "0.2.355-15",
|
|
14
|
+
"@libs-ui/components-gallery": "0.2.355-15",
|
|
15
|
+
"@libs-ui/components-image-editor": "0.2.355-15",
|
|
16
|
+
"@libs-ui/components-label": "0.2.355-15",
|
|
17
|
+
"@libs-ui/components-preview-file": "0.2.355-15",
|
|
18
|
+
"@libs-ui/components-scroll-overlay": "0.2.355-15",
|
|
19
|
+
"@libs-ui/services-dynamic-component": "0.2.355-15",
|
|
20
|
+
"@libs-ui/services-notification": "0.2.355-15",
|
|
21
21
|
"rxjs": "~7.8.0"
|
|
22
22
|
},
|
|
23
23
|
"sideEffects": false,
|