VueJS3 + Typescript - Read file from input file

Question

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,
  };
},

Answer 1

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])
  },
},