Overview
FileList displays a list of uploaded files with metadata, file type icons, and action buttons. It supports download and delete actions with loading states.
Key Features
- File type icons (image, video, audio, document)
- File size and date metadata display
- Download and delete action buttons
- Loading states during delete operations
Examples
Interactive Demo
A list of sample files. Click download or delete to see the actions.
project-requirements.pdf
2.3 MB•Jan 15, 2024
hero-banner.jpg
1 MB•Jan 16, 2024
product-demo.mp4
50 MB•Jan 17, 2024
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
files | FileListItemDTO[] | required | Array of files to display |
onDelete | (file: FileListItemDTO) => void | - | Optional callback when delete is clicked |
onDownload | (file: FileListItemDTO) => void | - | Optional callback when download is clicked |
showDelete | boolean | true | Show delete button (default: true) |
showDownload | boolean | true | Show download button (default: true) |
disabled | boolean | false | Disable all actions |
emptyMessage | string | - | Custom translation key for empty state |
Usage
import { FileList } from '@/ui/components';
// Basic usage
<FileList
files={files}
onDelete={(file) => handleDelete(file.id)}
onDownload={(file) => handleDownload(file)}
/>
// Read-only mode (hide actions)
<FileList
files={files}
showDelete={false}
showDownload={false}
/>
// Download only (no delete)
<FileList
files={files}
onDownload={(file) => handleDownload(file)}
showDelete={false}
/>
// With custom empty message
<FileList
files={[]}
emptyMessage="files.custom.noAttachments"
/>