Skip to content
Theme:

Ui3nInputFile

File input component for selecting files with validation for file type, size, and count.

Props

NameTypeDefaultDescription
idstring | undefined

Root element id

namestring | undefined

Input name attribute (for use in native forms)

modelValueFileList | File[] | undefined[]

Selected files

buttonTextstring | undefined"Select file"

Button text

multipleboolean | undefined

Whether multiple files can be selected

maxNumberOfFilesstring | number | undefined

Maximum number of files

maxFileSizenumber | undefined

Maximum file size in bytes

allowedFileTypesstring | undefined"*"

Allowed file types

disabledboolean | undefined

Whether input is disabled

Events

Event NameArguments / Value TypeDescription
update:modelValuevalue: FileList | File[]
errorvalue: string

Slots

Slot NameScope Props (v-slot)Description
#default

Default slot

Public Methods & Exposes

Method NameSignature / TypeDescription
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