# File inputs
The v-file-input
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.
# Usage
At its core, the v-file-input
component is a basic container that extends v-text-field.
# API
# Examples
# Props
# Accept
v-file-input
component can accept only specific media formats/file types if you want. For more information, checkout the documentation on the accept attribute.
# Chips
A selected file can be displayed as a chip. When using the chips and multiple props, each chip will be displayed (as opposed to the file count).
# Counter
When using the show-size property along with counter, the total number of files and size will be displayed under the input.
# Dense
You can reduces the file input height with dense
prop.
# Multiple
The v-file-input
can contain multiple files at the same time when using the multiple prop.
# Prepend icon
The v-file-input
has a default prepend-icon
that can be set on the component or adjusted globally. More information on changing global components can be found on the customizing icons page.
# Show size
The displayed size of the selected file(s) can be configured with the show-size property. Display sizes can be either 1024 (the default used when providing true) or 1000.
# Validation
Similar to other inputs, you can use the rules prop to create your own custom validation parameters.
# Slots
# Selection
Using the selection
slot, you can customize the appearance of your input selections. This is typically done with chips, however any component or markup can be used.
# Misc
# Complex selection slot
The flexibility of the selection slot allows you accommodate complex use-cases. In this example we show the first 2 selections as chips while adding a number indicator for the remaining amount.