<v-file-input multiple label="File input"></v-file-input>

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

<v-file-input
  label="File input"
  filled
  prepend-icon="mdi-camera"
></v-file-input>

The v-file-input has a default prepended icon that can be set on the component or adjusted globally.

<v-file-input show-size counter multiple label="File input"></v-file-input>

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
  v-model="files"
  color="deep-purple accent-4"
  counter
  label="File input"
  multiple
  placeholder="Select your files"
  prepend-icon="mdi-paperclip"
  outlined
  :show-size="1000"
>
  <template v-slot:selection="{ index, text }">
    <v-chip
      v-if="index < 2"
      color="deep-purple accent-4"
      dark
      label
      small
    >
      {{ text }}
    </v-chip>

    <span
      v-else-if="index === 2"
      class="overline grey--text text--darken-3 mx-2"
    >
      +{{ files.length - 2 }} File(s)
    </span>
  </template>
</v-file-input>

export default {
  data: () => ({
    files: [],
  }),
}

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.

<div>
  <v-file-input chips multiple label="File input w/ chips"></v-file-input>
  <v-file-input small-chips multiple label="File input w/ small chips"></v-file-input>
</div>

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 accept="image/*" label="File input"></v-file-input>

v-file-input component can accept only specific media formats/file types if you want.

<v-file-input show-size label="File input"></v-file-input>

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.