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

Kunukn · Accepted Answer · 2024-05-04 07:40:52Z

4

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

edited May 4, 2024 at 7:40

answered Aug 27, 2021 at 8:30

Kunukn

2,2361 gold badge17 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Thiago Valente Over a year ago

typescript return a lot of error because Idk who is e and files? what is the file type is File?

Kunukn Over a year ago

I have added a TypeScript version @ThiagoValente

Kunukn Over a year ago

@Freeman interface example exists for HTMLInputEvent, just above the methods

Eino Gourdin · Accepted Answer · 2021-08-30 08:26:59Z

3

What does your uploadFile look like?

The simpler may be to declare it to take directly the files list:

async uploadFiles(fileList: Array<File>) {
    for (const file of fileList) {
        // do something with the file

And call it this way:

v-on:change="uploadFiles($event.target.files)"

answered Aug 30, 2021 at 8:26

Eino Gourdin

4,6864 gold badges48 silver badges70 bronze badges

Comments

ludovic D · Accepted Answer · 2023-12-02 06:27:09Z

0

For vue3js we would get the following typescript setup:

<script setup lang="ts">  
interface HTMLInputEvent extends Event {
  target: HTMLInputElement & EventTarget;
}

const fileChanged = (ev: HTMLInputEvent | DragEvent) => {
  let files = (ev as HTMLInputEvent).target.files || (ev as DragEvent).dataTransfer?.files;
  if (!files?.length) return;

  doSomethingWithTheFile(files[0]);
};
</script>

answered Dec 2, 2023 at 6:27

ludovic D

312 bronze badges

Comments

Syed Bilal Haider · Accepted Answer · 2024-05-04 16:02:36Z

It looks like you're working on uploading files in Vue.js. Instead of using v-model, which doesn't work for file inputs, you're using v-on: change, which is the right approach. Keep it up!

 <input
      type="file"
      name="file"
      @change="uploadFile"
      style="display: none; border: none"
  />

And in your javascript Vue component:

export default {
  data() {
    return {
      file: null,
    };
  },
  methods: {
    uploadFile(event) {
      const files = event.target.files;
      
      if (files.length > 0) {
        this.file = files[0];
        console.log("Uploaded file:", this.file);
        // Implement your upload logic here
      }
    },
  },
};

Typescript version:

export default {
  data() {
    return {
      file: null as File | null,
    };
  },
  methods: {
    uploadFile(event: Event) {
      const target = event.target as HTMLInputElement;
      const files = target.files;
      
      if (files && files.length > 0) {
        this.file = files[0];
        console.log("Uploaded file:", this.file);
        // Implement your upload logic here
      }
    },
  },
};

In the TypeScript version, we add type annotations for the file property and the event parameter in the uploadFile method. Additionally, we use type assertions to handle the types more explicitly.

Collectives™ on Stack Overflow

VueJS3 + Typescript - Read file from input file

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related