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.
