File Upload
A file upload component with drag and drop, previews, and progress tracking.
Usage
Props
| Prop | Type | Default | Description |
|---|---|---|---|
modelValue | File[] | - | The list of selected files. Use with v-model. |
accept | string | - | Accepted MIME types or file extensions. |
maxFiles | number | Infinity | Maximum number of files allowed. |
maxSize | number | - | Maximum file size in bytes. |
multiple | boolean | true | Whether multiple files can be selected. |
disabled | boolean | false | Whether the upload is disabled. |
Events
| Event | Payload | Description |
|---|---|---|
update:modelValue | File[] | Emitted when files change. |
file-accept | File | Emitted when a file passes validation. |
file-reject | { file: File, errors: FileError[] } | Emitted when a file fails validation. |
Sub-components
FileUploadDropzone
Drag and drop target area.
Slots
| Slot | Props | Description |
|---|---|---|
default | { isDragging: boolean, isDisabled: boolean, openFilePicker: () => void } | Content with drag state access. |
FileUploadTrigger
Button that opens the file picker dialog.
FileUploadList
Container for uploaded file items.
FileUploadItem
Individual file display with status.
| Prop | Type | Default | Description |
|---|---|---|---|
file* | File | - | The file object. |
progress | number | - | Upload progress percentage (0-100). |
status | 'pending' | 'uploading' | 'complete' | 'error' | 'pending' | Upload status. |
error | string | - | Error message for failed uploads. |
FileUploadItemName
Displays the file name.
FileUploadItemSize
Displays the file size.
| Prop | Type | Default | Description |
|---|---|---|---|
precision | number | 1 | Decimal places for size display. |
FileUploadItemPreview
Image preview thumbnail.
FileUploadItemProgress
Upload progress bar.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'success' | 'destructive' | 'default' | Progress bar color variant. |
FileUploadItemDelete
Button to remove the file.
FileUploadClear
Button to clear all files.