File Upload
Component tải lên file với drag-and-drop, validation kích thước và loại file.
Cài đặt
Import
TSX
Cơ bản
Kéo thả hoặc click để chọn file.
Drop files here or browse
PDF, DOC, DOCX — tối đa 10MB
Nhiều file
Cho phép tải nhiều file cùng lúc.
Drop files here or browse
PNG, JPG, GIF — tối đa 5 file, 5MB/file
Kích thước
Ba kích thước: sm, md, lg.
Drop files here or browse
Drop files here or browse
Drop files here or browse
Tuỳ chỉnh nội dung
Truyền children để thay đổi giao diện dropzone.
Chọn ảnh đại diện
JPG, PNG — tối đa 2MB
Disabled & Error
Trạng thái vô hiệu và lỗi.
Drop files here or browse
Không thể tải lên
Drop files here or browse
File vượt quá kích thước cho phép (10MB)
Preview
Xem trước file trước khi tải lên.
Drop files here or browse
PNG, JPG, GIF — tối đa 5 file, 5MB/file
Drop files here or browse
PNG, JPG, GIF — tối đa 5 file, 5MB/file
API Reference
| Prop | Type | Default | Mô tả |
|---|---|---|---|
value | File[] | [] | Mảng file đang được chọn (controlled) |
onChange | (files: File[]) => void | — | Callback khi danh sách file thay đổi |
multiple | boolean | false | Cho phép chọn nhiều file cùng lúc |
accept | string | — | Loại file được chấp nhận, ví dụ: "image/*", ".pdf,.docx" |
maxSize | number | — | Kích thước tối đa mỗi file (bytes) |
maxFiles | number | — | Số lượng file tối đa (chỉ áp dụng khi multiple=true) |
disabled | boolean | false | Vô hiệu hóa toàn bộ dropzone |
error | string | — | Thông báo lỗi hiển thị bên dưới component |
onError | (message: string) => void | — | Callback khi file vi phạm validation (maxSize, maxFiles) |
label | string | — | Label hiển thị trên dropzone |
description | string | — | Mô tả phụ bên trong dropzone (loại file, giới hạn dung lượng...) |
showPreview | boolean | false | Hiển thị preview thumbnail cho file ảnh |
previewVariant | "thumbnail" | "fill" | "thumbnail" | Kiểu preview: "thumbnail" hiển thị trong danh sách, "fill" lấp đầy khung dropzone (chỉ dùng cho single image) |
size | "sm" | "md" | "lg" | "md" | Kích thước của dropzone |
children | ReactNode | — | Nội dung tuỳ chỉnh bên trong dropzone, thay thế UI mặc định |
className | string | — | Class CSS tuỳ chỉnh cho wrapper ngoài cùng |