VFileInput
The VFileInput component provides a file input field with support for drag-and-drop, multiple files, file type filtering, and visual file size display.
Basic Usage
<template>
<VFileInput
v-model="files"
label="Upload file"
/>
</template>
<script setup>
import { ref } from 'vue'
const files = ref(null)
</script>
Props
The selected file(s). Single file when multiple is false, array when true.
Allow multiple file selection.
Display selected files as chips.
counterString
string
default:"$vuetify.fileInput.counter"
Text template for the counter (e.g., ” files”).
counterSizeString
string
default:"$vuetify.fileInput.counterSize"
Text template for the counter with size (e.g., ” files ( in total)”).
showSize
boolean | 1000 | 1024
default:"false"
Display file sizes. Use 1000 for decimal (KB) or 1024 for binary (KiB).
truncateLength
number | string
default:"22"
Number of characters to display before truncating filename.
Hide the input field (useful for custom displays).
Icon to prepend to the input.
HTML accept attribute to filter file types (e.g., “image/*”, “.pdf,.doc”).
Add a clear icon to remove selected files.
Multiple Files
<template>
<VFileInput
v-model="files"
label="Select files"
multiple
chips
counter
show-size
/>
</template>
<script setup>
import { ref } from 'vue'
const files = ref([])
</script>
File Type Filtering
<template>
<div>
<VFileInput
v-model="images"
label="Images only"
accept="image/*"
prepend-icon="mdi-camera"
/>
<VFileInput
v-model="documents"
label="Documents only"
accept=".pdf,.doc,.docx"
prepend-icon="mdi-file-document"
/>
</div>
</template>
<script setup>
import { ref } from 'vue'
const images = ref(null)
const documents = ref(null)
</script>
With File Size Display
<template>
<VFileInput
v-model="files"
label="Upload files"
multiple
chips
counter
:show-size="1024"
hint="File sizes shown in KiB"
persistent-hint
/>
</template>
<script setup>
import { ref } from 'vue'
const files = ref([])
</script>
Custom Selection Display
<template>
<VFileInput
v-model="files"
label="Custom display"
multiple
>
<template #selection="{ fileNames, totalBytes, totalBytesReadable }">
<VChip
v-for="name in fileNames"
:key="name"
size="small"
label
color="primary"
>
{{ name }}
</VChip>
<div class="text-caption">
Total: {{ totalBytesReadable }}
</div>
</template>
</VFileInput>
</template>
<script setup>
import { ref } from 'vue'
const files = ref([])
</script>
Drag and Drop
The file input automatically supports drag and drop:
<template>
<VFileInput
v-model="files"
label="Drag files here or click to browse"
multiple
chips
counter
show-size
hint="You can drag and drop files here"
persistent-hint
/>
</template>
<script setup>
import { ref } from 'vue'
const files = ref([])
</script>
Validation
<template>
<VFileInput
v-model="file"
label="Upload resume (PDF only)"
accept=".pdf"
:rules="[
v => !!v || 'File is required',
v => !v || v.size < 2000000 || 'File size should be less than 2 MB'
]"
/>
</template>
<script setup>
import { ref } from 'vue'
const file = ref(null)
</script>
Events
update:modelValue
(files: File | File[]) => void
Emitted when file selection changes.
Emitted when files are rejected due to type filtering.
Emitted when the control area is clicked.
update:focused
(focused: boolean) => void
Emitted when the focus state changes.
Slots
selection
{ fileNames, totalBytes, totalBytesReadable }
Customize how selected files are displayed.
Customize the counter display.