Sometimes, we want to add a file upload input with Vuetify.

In this article, we’ll look at how to add a file upload input with Vuetify.

How to add a file upload input with Vuetify?

To add a file upload input with Vuetify, we can add a v-btn button with a hidden file input.

For instance, we write

<template>
  <div>
    <v-btn color="success" @click="$refs.inputUpload.click()">
      select file
    </v-btn>
    <input v-show="false" ref="inputUpload" type="file" @change="onChange" />
  </div>
</template>

to add a Vuetify button with v-btn.

And we add the file input and assign a ref to it with

<input v-show="false" ref="inputUpload" type="file" @change="onChange" />

We add ref="inputUpload" so $refs.inputUpload is set to the file input.

Then we open the file selector window on button click with

@click="$refs.inputUpload.click()"

And we hide the input with

v-show="false"

Conclusion

To add a file upload input with Vuetify, we can add a v-btn button with a hidden file input.