I was trying to programmatically trigger .click() event of v-file-input because it has on the documentation at Vuetify.
but it shows an error this.$refs.imagePicker.click is not a function
am I missing something here?
Code Reproduction: https://codepen.io/kforr24/pen/ZEQweLP
I'm trying to upload an image using a certain button. Like that certain button would trigger a click event on the v-file-input.
@User28's solution (one of the comments below the question) works:
this.$refs.image.$refs.input.click()
For vue 3, refs are deprecated. I found that a workaround this is by using element id. You can use
<v-file-input
id="fileUpload"
accept=".pdf"
hide-input
prepend-icon=""
/>
<div>
<v-btn @click="getFile">
UPLOAD
</v-btn>
</div>
then on your event function for your button you can use,
const getFile = function () {
let fileUpload = document.getElementById('fileUpload')
if (fileUpload != null) {
fileUpload.click()
}
}
refs are not deprecated in vue3 but it now returns a proxy instead of a reference to the DOM.UPDATE February 2022
The best solution for any version is adding a id to the input or v-file-input then hide the input, in case you use v-file-input remove the icon by passing prepend-icon="" and hide-input .
<v-btn @click="document.getElementById('uploader').click()">
Upload Button text here
<v-file-input hide-input prepend-icon="" id="uploader"></v-file-input>
</v-btn>
in case you get this error:
TypeError: Cannot read properties of undefined (reading 'getElementById')
just put document in data
data: () => ({
document,
other: true
})
<v-file-input ref="fileInput"/>
<v-btn @click="open">
UPLOAD
</v-btn>
open(){
this.$refs.fileInput.$refs.input.click()
}
$emitted by Vuetify, not the internal method name used to trigger that emit. If you provided more info about what you're trying to do with the programmatic trigger, you could get more help trying to solve the problem.onclick. Can you try that?this.$refs.image.$refs.input.click().