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.

v-file-input/prop-accept.vue

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).

v-file-input/prop-chips.vue

Counter

When using the show-size property along with counter, the total number of files and size will be displayed under the input.

v-file-input/prop-counter.vue

Density

You can reduces the file input height with the density prop.

v-file-input/prop-dense.vue

Multiple

The v-file-input can contain multiple files at the same time when using the multiple prop.

v-file-input/prop-multiple.vue

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.

v-file-input/prop-prepend-icon.vue

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.

v-file-input/prop-show-size.vue

Validation

Similar to other inputs, you can use the rules prop to create your own custom validation parameters.

v-file-input/prop-validation.vue

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.

v-file-input/slot-selection.vue

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.

v-file-input/misc-complex-selection.vue

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.