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	—

CSS Variables

Set any of these where you need it — on :root, on a container, or on the element itself through [data-ui3n] — and the component follows. Leave them alone and it uses the defaults below.

Name	Default
--ui3n-input-file-font-size	12px
--ui3n-input-file-padding-inline	4px

Usage Examples

Basic usage

Basic usage

Simple file input with default button text

Select file

Multiple file selection

Multiple file selection

Select multiple files using the multiple prop and limit with maxNumberOfFiles

Select multiple files

File restrictions

File restrictions

Restrict file types with allowedFileTypes and limit file size with maxFileSize

Select image (max 1MB)

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

Select files (max 3, images only, max 500KB)