The official Vue documentation does not explicitly mention how to handle input files.

If you search for "vue input file" you will find many answers like this:

<script setup>
import { shallowRef, ref } from "vue"
const inputRef = shallowRef()
const files = ref([])
const onChange = (e) => {
  files.value = e.target.files
}
const clear = () => {
  inputRef.value.value = ''
  files.value = []
}
</script>

<template>
  <input ref="inputRef" type="file" multiple @change="onChange" />
  <button @click="clear">Clear</button>
</template>

Because you cannot directly set the value of the input file, you cannot use v-model too.

.files

In addition to inputFile.value, you can also use inputFile.files to access the value of the input file.

inputFile.files // FileList

.value is almost read-only (can only be programmatically reset). But .files can be set using FileList. You can assign it a FileList object. For example, you can place the files from inputFile1 into inputFile2's files.

const files = inputFile1.files

inputFile2.files = files

In other words, we can set value of input file using javascript.

v-bind dom properties

This feature of Vue might be a bit obscure? Because even after playing with Vue for several years, it's my first time encountering this functionality, and I've found that it's been supported since Vue 2.

The v-bind syntax supports setting DOM properties.

In Vue 3, when you use v-bind on an HTML tag and the attribute is not a standard HTML attribute, Vue will use the in operator to determine if it's a property of the DOM element. You can check v-bind document。

Combining with the feature of .files property, we can make a more controllable input file.

<script setup>
import { shallowRef, ref } from "vue"
const files = ref()
const onChange = (e) => {
  files.value = e.target.files
}
const clear = () => {
  files.value = new DataTransfer().files // fill in a empty FileList
}
</script>

<template>
  <input 
    type="file" 
    multiple 
    :files="files" 
    @change="onChange" 
  />
  <button @click="clear">Clear</button>
</template>

You can check live example here: https://stackblitz.com/edit/vitejs-vite-n16j6w?embed=1&file=src%2FApp.vue

Reference

• v-bind
• DataTransfer