I want to upload some file, but I can't access with v-model
VueCompilerError: v-model cannot be used on file inputs since they are read-only. Use a v-on:change listener instead.
So, I've change the v-model
to v-on:change
like code below, but I don't know how to do this
<input
type="file"
name="file"
v-on:change="uploadFile"
style="display: none; border: none"
/>
I read a big list of examples, but none worked.
My data (Idk if it's right):
data() {
return {
file: null as unknown as File,
};
},
A basic example could look like this
<input type="file" @change="onFileChange">
JavaScript version
methods: {
onFileChange(event) {
let files = event.target.files || event.dataTransfer.files;
if (!files.length) return;
doSomethingWithTheFile(files[0]);
},
}
TypeScript version could look like this
interface HTMLInputEvent extends Event {
target: HTMLInputElement & EventTarget
}
methods: {
onFileChange(event: HTMLInputEvent | DragEvent) {
let files =
(event as HTMLInputEvent).target.files ||
(event as DragEvent).dataTransfer.files
if (!files.length) return
doSomethingWithTheFile(files[0])
},
},