Question

68

v-model doesn't support input type=file

rated 0 times [ 74] [ 6] / answers: 1 / hits: 76803 / 7 Years ago, mon, january 23, 2017, 12:00:00

I can not use v-model with file input, Vue says I must use v-on:change. Ok so I can use v-on:change, but how can I bind the content of the input file to a data property?

Let's say I want to bind it in a component to this.file:

export default {

  data() {

    file: null

  },

  // ...

}

Here is the HTML part:

<input id=image v-on:change=??? type=file>

<!--                           ^- don't know how to bind without v-model -->

How should I do the binding?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kieraelsies

Add To Favorites

Follow

Total Points: 718

Total Questions: 103

Total Answers: 104

Location: England

Member since Sun, May 21, 2023

1 Year ago

kieraelsies questions

1 How do I change text color in SweetAlert2?

Tue, Aug 3, 21, 00:00, 3 Years ago

1 Tailwind Custom Colors Not Complied

Tue, Feb 23, 21, 00:00, 3 Years ago

1 How to write inline onclick function as es6 arrow function?

Thu, Nov 12, 20, 00:00, 4 Years ago

1 How to remove all roles from an user discord.js v12?

Wed, Sep 9, 20, 00:00, 4 Years ago

1 PlusMinus Challenge

Mon, Sep 16, 19, 00:00, 5 Years ago

View All

answered 7 Years ago dayanaracolleeng · Accepted Answer

In the onchange event you should pass the event object to a function and handle:

onFileChange(e) {

  var files = e.target.files || e.dataTransfer.files;

  if (!files.length)

    return;

  this.createImage(files[0]);

},

For more information refer https://codepen.io/Atinux/pen/qOvawK/