npm package: @libs-ui/pipes-check-file-extension
Description: > Version: `0.2.355-10` > > Pipe kiểm tra định dạng file dựa trên extension (đuôi file) để phân loại thành các nhóm định dạng phổ biến.
Latest version: 0.2.356-23

# @libs-ui/pipes-check-file-extension

> Version: `0.2.355-10`
>
> Pipe kiểm tra định dạng file dựa trên extension (đuôi file) để phân loại thành các nhóm định dạng phổ biến.

## Giới thiệu

`LibsUiPipesCheckFileExtensionPipe` giúp xác định nhanh chóng một file có thuộc nhóm định dạng cụ thể (như image, video, pdf...) hay không. Kết quả trả về là `boolean` (`true` nếu khớp, `false` nếu không).

### Tính năng

- ✅ Kiểm tra định dạng file dựa trên extension
- ✅ Hỗ trợ các nhóm: image, video, word, xlsx, pdf, pptx, other
- ✅ Hỗ trợ MIME type cho các loại văn bản
- ✅ Pure logic, hiệu năng cao
- ✅ Standalone pipe (Angular 16+)

## Khi nào sử dụng

- Khi cần kiểm tra loại file dựa trên phần mở rộng (extension) để hiển thị icon hoặc UI tương ứng.
- Hỗ trợ các nhóm định dạng: image, video, word, xlsx, pdf, pptx, other.
- Sử dụng trong danh sách file, upload preview, hoặc file attachment.

## Cài đặt

```bash
npm install @libs-ui/pipes-check-file-extension
```

## Import

```typescript
import { LibsUiPipesCheckFileExtensionPipe } from '@libs-ui/pipes-check-file-extension';

@Component({
  standalone: true,
  imports: [LibsUiPipesCheckFileExtensionPipe],
  // ...
})
```

## Cách sử dụng

### 1. Kiểm tra Image

```html
{{ fileImage | LibsUiPipesCheckFileExtensionPipe : 'image' }}
```

```typescript
readonly fileImage: IFile = { name: 'holiday-photo.jpg', size: '2 MB' };
```

### 2. Kiểm tra Video

```html
{{ fileVideo | LibsUiPipesCheckFileExtensionPipe : 'video' }}
```

```typescript
readonly fileVideo: IFile = { name: 'presentation.mp4', size: '10 MB' };
```

### 3. Kiểm tra sai loại (False)

```html
{{ fileDoc | LibsUiPipesCheckFileExtensionPipe : 'image' }}
```

```typescript
readonly fileDoc: IFile = { name: 'requirements.docx', size: '5 KB' };
```

### 4. Ứng dụng: Hiển thị Icon theo loại file

```html
@for (file of fileList; track file.name) {
  <div class="flex items-center gap-2 mb-2">
    @if (file | LibsUiPipesCheckFileExtensionPipe : 'image') {
      <span>🖼️ Image:</span>
    }
    @if (file | LibsUiPipesCheckFileExtensionPipe : 'video') {
      <span>🎥 Video:</span>
    }
    @if (file | LibsUiPipesCheckFileExtensionPipe : 'word') {
      <span>📝 Word:</span>
    }
    <span>{{ file.name }}</span>
  </div>
}
```

```typescript
readonly fileList: IFile[] = [
  { name: 'holiday-photo.jpg' },
  { name: 'presentation.mp4' },
  { name: 'requirements.docx' }
];
```

## API Reference

### LibsUiPipesCheckFileExtensionPipe

#### Parameters

| Property | Type                                                                   | Default | Description                                      |
| -------- | ---------------------------------------------------------------------- | ------- | ------------------------------------------------- |
| `file`   | `IFile \| any`                                                         | `-`     | Đối tượng file cần kiểm tra (cần có `name`, `mimetype`, hoặc `type`). |
| `type`   | `'image' \| 'video' \| 'word' \| 'xlsx' \| 'pdf' \| 'pptx' \| 'other'` | `-`     | Nhóm định dạng muốn kiểm tra.                    |

## Types & Interfaces

### IFile

```typescript
export interface IFile {
  id?: string;
  name?: string;
  file?: File;
  size?: string;
  isUploading?: boolean;
  percentUploading?: number;
  isUpdate?: boolean;
  url?: string;
  origin_url?: string;
  mimetype?: string;
  type?: TYPE_FILE;
  error?: string;
  isAvatar?: boolean;
}

export type TYPE_FILE = 'document' | 'image' | 'video' | 'audio';
```

**Mô tả**: Interface cho đối tượng file. Pipe yêu cầu ít nhất một trong các thuộc tính: `name`, `mimetype`, hoặc `type` (từ `file.type` nếu là File object) để hoạt động.

## Lưu ý quan trọng (Important Notes)

> ⚠️ **Caveats**:
>
> - **Yêu cầu đối tượng File**: Pipe này yêu cầu input là một object có ít nhất một trong các thuộc tính: `name`, `mimetype`, hoặc `type` (từ `file.type` nếu là File object). Pipe sẽ tự động extract extension từ `name` hoặc sử dụng trực tiếp `mimetype`/`type`. Nếu không tìm thấy, pipe sẽ trả về `false`.
> - **Hỗ trợ MIME Type**: Đối với các loại văn bản (word, xlsx, pdf...), pipe hỗ trợ kiểm tra cả extension rút gọn (ví dụ: `pdf`) và MIME type đầy đủ (ví dụ: `application/pdf`).
> - **Phân loại "Other"**: Loại `other` sẽ trả về `true` cho bất kỳ định dạng nào **KHÔNG** nằm trong danh sách mặc định của Image, Video và Documents phổ biến.
> - **Hiệu năng**: Pipe này là pure logic, có thể sử dụng an toàn trong các danh sách dài mà không gây ảnh hưởng hiệu năng đáng kể.

## Công nghệ sử dụng

- Angular 18+
- TypeScript 5+

## Demo

- **Local Development**: [http://localhost:4500/pipes/check-file-extension](http://localhost:4500/pipes/check-file-extension)

## Unit Tests

Xem file `test-commands.md` để biết cách chạy unit tests.

## License

MIT