DEV Community

Cover image for Vue Tip // v-model on custom component input type="file"
Salvador García
Salvador García

Posted on • Updated on

Vue Tip // v-model on custom component input type="file"

Hi everyone. Let's get to the point. A few days ago I needed to use v-model in a component of my own that I needed to capture a file in an input of type file. After trying a bit, the solution was the following:


  <input type="file" @change="onChangeFile" name="file" />


  methods: {
    onChangeFile(event) {

//Your component made in Vue 3
<MyInputFileComponent v-model="file" />
Enter fullscreen mode Exit fullscreen mode

This is the easiest way to use it. If you need to capture many files you just have to go through the list of files found in the

I share this information in case there is anyone out there looking for a solution for this scenario. Happy dev.

Top comments (2)

furkanulutasx profile image

Why did you "file" the v-model name?

erefor profile image
Salvador García

It is just an example name. It could be: "userFile", "userPhoto", "salesRecord", etc...