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.
See documentation.
The v-file-input can contain multiple files at the
same time when using the multiple prop.
The v-file-input has a default prepended icon that
can be set on the component or adjusted globally.
When using the show-size property along with counter, the total number of files and size will be displayed under the input.
The flexibility of the selection slot allows you accomodate complex use-cases. In this example we show the first 2 selections as chips while adding a number indicator for the remaining amount.
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).
v-file-input component can accept only specific media
formats/file types if you want.
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.