Theme:
Ui3nInputFile
File input component for selecting files with validation for file type, size, and count.
Props
| Name | Type | Default | Description |
|---|---|---|---|
id | string | undefined | — | Root element id |
name | string | undefined | — | Input name attribute (for use in native forms) |
modelValue | FileList | File[] | undefined | [] | Selected files |
buttonText | string | undefined | "Select file" | Button text |
multiple | boolean | undefined | — | Whether multiple files can be selected |
maxNumberOfFiles | string | number | undefined | — | Maximum number of files |
maxFileSize | number | undefined | — | Maximum file size in bytes |
allowedFileTypes | string | undefined | "*" | Allowed file types |
disabled | boolean | undefined | — | Whether input is disabled |
Events
| Event Name | Arguments / Value Type | Description |
|---|---|---|
update:modelValue | value: FileList | File[] | — |
error | value: string | — |
Slots
| Slot Name | Scope Props (v-slot) | Description |
|---|---|---|
#default | — | Default slot |
Public Methods & Exposes
| Method Name | Signature / Type | Description |
|---|---|---|
clear() | () => void | — |
Usage Examples
Basic usage
Basic usage
Simple file input with default button text
Multiple file selection
Multiple file selection
Select multiple files using the multiple prop and limit with maxNumberOfFiles
File restrictions
File restrictions
Restrict file types with allowedFileTypes and limit file size with maxFileSize
Custom slot content
Custom slot content
Use the default slot to customize the file selection trigger
Error handling
Error handling
Handle validation errors using the error event