File Input

The FileInput component is a specialized input that provides a clean interface for selecting files, showing detailed selection information and upload progress. It is meant to be a direct replacement for a standard file input.

info

For more details about Vuetify’s usage of FileInput component, click FileInput page.
For more prop explanations, click Vuetify FileInput API page.

Props

Attribute	Description	Type	Default
value	includes attributes such as the name of the uploaded file, its size, when it was uploaded.	object	-
accept	prop that gives the file types to be accepted in string(e.g. : 'image/*').	string	-
appendIcon	Appends an icon to the component, uses the same syntax as Icon.	string	undefined
autoFocus	Enables autofocus.	boolean	false
chips	Changes display of selections to chips.	boolean	false
class	prop that controls the classes added on the component.	string	-
clearIcon	Applied when using clearable and the input is dirty.	string	'$clear'
clearable	Add input clear functionality, default icon is Material Design Icons mdi-clear.	boolean	true
counter	Creates counter for input length; if no number is specified, it defaults to 25. Does not apply any validation.	boolean | number | string	undefined
counterSizeString	The text displayed when using the counter and show-size props.	string	'$vuetify.fileInput.countersize'
dark	Applies dark theme.	boolean	false
disabled	Disable the input.	boolean	false
error	Puts the input in a manual error state.	boolean	false
errorCount	The total number of errors that should display at once.	number | string	1
errorMessages	Puts the input in an error state and passes through custom error messages. Will be combined with any validations that occur from the rules prop. This field will not trigger validation.	string | Array	[]
filled	Applies the alternate filled input style.	boolean	false
hideDetails	Hides hint and validation errors. When set to auto messages will be rendered only if there’s a message (hint, error message, counter value etc) to display.	boolean | string	undefined
hideInput	Display the icon only without the input (file names).	boolean	false
hint	Details text.	string	undefined
label	sets input label.	string	undefined
loading	Displays linear progress bar. Can either be a string which specifies which color is applied to the progress bar (any material color or theme color - primary, secondary, success, info, warning, error) or a boolean which uses the component color (set by color prop - if it’s supported by the component) or the primary color	boolean | string	false
multiple	Adds the multiple attribute to the input, allowing multiple file selections.	boolean	false
outlined	Applies the outlined style to the input.	boolean	false
persistentHint	Forces hint to always be visible.	boolean	false
placeholder	sets the input’s placeholder text.	string	undefined
prefix	Displays prefix text.	string	undefined
prependIcon	Prepends an icon to the component, uses the same syntax as Icon.	string	'$file'
prependInnerIcon	Prepends an icon inside the component’s input, uses the same syntax as Icon.	string	undefined
rules	Accepts a mixed array of types function, boolean and string. Functions pass an input value as an argument and must return either true / false or a string containing an error message. The input field will enter an error state if a function returns (or any value in the array contains) false or is a string.	Array	[]
shaped	Round if outlined and increase border-radius if filled. Must be used with either outlined or filled.	boolean	false
solo	Changes the style of the input.	boolean	false
soloInverted	Reduces element opacity until focused.	boolean	false
suffix	Displays suffix text.	string	undefined
showsize	sets the displayed size of selected file(s). When using true will default to 1000 displaying (kB, MB, GB) while 1024 will display (KiB, MiB, GiB).	boolean | number	false
singleLine	Label does not move on focus.	boolean	false
smallChips	Changes display of selections to chips with the small property.	boolean	false
success	Puts the input in a manual success state.	boolean	false
successMessages	Puts the input in a success state and passes through custom success messages.	string | Array	[]
truncateLength	The length of a filename before it is truncated with ellipsis.	number | string	22
type	Sets input type.	string	'file'
validateOnBlur	Delays validation until blur event.	boolean	false
tabindex	It determines the order of switching from one component to another with the tab key.	string	undefined
visible	Visibility of FileInput component.	boolean	true

Events

Attribute	Description
change	Emitted when the input is changed by user interaction File[]
click:mouseEvent	Emitted when input is clicked
click:prepend	Emitted when prepended icon is clicked
click:prepend-inner	Emitted when prepended inner icon is clicked
click:append-outer	Emitted when appended outer icon is clicked
click:append	Emitted when appended icon is clicked
click:clear	Emitted when clearable icon clicked
focus	Emitted when component is focused

Slots

Attribute	Description
append	Adds an item inside the input and after input content
append-outer	Adds an item outside the input and after input content
counter	`{ props: { dark: boolean, light: boolean, max: string
default	The default Vue slot.
label	Replaces the default label
message	{ key: number, // the messages index, message: string, // the message }
prepend	Adds an item outside the input and before input content
prepend-inner	Adds an item inside the input and before input content
progress	Slot for custom progress linear (displayed when loading prop is not equal to boolean False)
selection	Slot for defining a custom appearance for selected item(s). Provides the current index, text (truncated) and file.

Samples Qjson

FileInput
FileInput_ImagePicker
FileInputGetUploadedContent
FileInput-Slot-VIcon-Dolu