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
Top comments (0)