@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

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

Import

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

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

Cách sử dụng

1. Kiểm tra Image

{{ fileImage | LibsUiPipesCheckFileExtensionPipe : 'image' }}

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

2. Kiểm tra Video

{{ fileVideo | LibsUiPipesCheckFileExtensionPipe : 'video' }}

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

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

{{ fileDoc | LibsUiPipesCheckFileExtensionPipe : 'image' }}

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

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

@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>
}

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

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

Unit Tests

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

License

MIT