@libs-ui/pipes-check-file-extension 0.2.355-0 → 0.2.355-10
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 +86 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
# CheckFileExtensionPipe
|
|
2
|
+
|
|
3
|
+
> Pipe kiểm tra định dạng file dựa trên extension (đuôi file).
|
|
4
|
+
|
|
5
|
+
## Giới thiệu
|
|
6
|
+
|
|
7
|
+
`LibsUiPipesCheckFileExtensionPipe` giúp kiểm tra xem một object file (IFile) có thuộc nhóm định dạng cụ thể hay không (ví dụ: image, video, word...). Thường được sử dụng để hiển thị icon, preview hoặc filter danh sách file.
|
|
8
|
+
|
|
9
|
+
## Tính năng
|
|
10
|
+
|
|
11
|
+
- ✅ Hỗ trợ các nhóm định dạng: `image`, `video`, `word`, `xlsx`, `pdf`, `pptx`.
|
|
12
|
+
- ✅ Hỗ trợ nhóm `other` (các định dạng không thuộc các nhóm trên).
|
|
13
|
+
- ✅ Tích hợp với interface `IFile`.
|
|
14
|
+
- ✅ Standalone Pipe.
|
|
15
|
+
|
|
16
|
+
## Cài đặt
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
npm install @libs-ui/pipes-check-file-extension
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## Import
|
|
23
|
+
|
|
24
|
+
```typescript
|
|
25
|
+
import { LibsUiPipesCheckFileExtensionPipe } from '@libs-ui/pipes-check-file-extension';
|
|
26
|
+
|
|
27
|
+
@Component({
|
|
28
|
+
standalone: true,
|
|
29
|
+
imports: [LibsUiPipesCheckFileExtensionPipe],
|
|
30
|
+
// ...
|
|
31
|
+
})
|
|
32
|
+
export class YourComponent {}
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
## Sử dụng
|
|
36
|
+
|
|
37
|
+
### Basic Usage
|
|
38
|
+
|
|
39
|
+
Kiểm tra xem file có phải là ảnh không:
|
|
40
|
+
|
|
41
|
+
```html
|
|
42
|
+
<div *ngIf="file | LibsUiPipesCheckFileExtensionPipe: 'image'">Đây là file ảnh</div>
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
### Hiển thị Icon theo loại file
|
|
46
|
+
|
|
47
|
+
```html
|
|
48
|
+
<ng-container [ngSwitch]="true">
|
|
49
|
+
<span *ngSwitchCase="file | LibsUiPipesCheckFileExtensionPipe: 'image'">🖼️ Image</span>
|
|
50
|
+
<span *ngSwitchCase="file | LibsUiPipesCheckFileExtensionPipe: 'video'">🎥 Video</span>
|
|
51
|
+
<span *ngSwitchCase="file | LibsUiPipesCheckFileExtensionPipe: 'pdf'">📄 PDF</span>
|
|
52
|
+
<span *ngSwitchDefault>📁 File</span>
|
|
53
|
+
</ng-container>
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
## API
|
|
57
|
+
|
|
58
|
+
```html
|
|
59
|
+
{{ value | LibsUiPipesCheckFileExtensionPipe : type }}
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
### Parameters
|
|
63
|
+
|
|
64
|
+
| Parameter | Type | Required | Description |
|
|
65
|
+
| --------- | -------- | -------- | ------------------------------------------------------------------------------------------------------------------------ |
|
|
66
|
+
| `value` | `IFile` | Yes | Object file cần kiểm tra. Cần có property `name` (chứa extension). |
|
|
67
|
+
| `type` | `string` | Yes | Loại định dạng cần kiểm tra. Các giá trị hỗ trợ: `'image'`, `'video'`, `'word'`, `'xlsx'`, `'pdf'`, `'pptx'`, `'other'`. |
|
|
68
|
+
|
|
69
|
+
## Supported Extensions
|
|
70
|
+
|
|
71
|
+
- **image**: jpg, jpeg, png, gif, bmp, svg, ...
|
|
72
|
+
- **video**: mp4, avi, mov, wmv, ...
|
|
73
|
+
- **word**: doc, docx
|
|
74
|
+
- **xlsx**: xls, xlsx, csv
|
|
75
|
+
- **pdf**: pdf
|
|
76
|
+
- **pptx**: ppt, pptx
|
|
77
|
+
|
|
78
|
+
## Demo
|
|
79
|
+
|
|
80
|
+
Chạy lệnh sau để xem demo:
|
|
81
|
+
|
|
82
|
+
```bash
|
|
83
|
+
npx nx serve core-ui
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
Truy cập: `http://localhost:4200/pipes/check-file-extension`
|