v-file-input .click() is not a function

Question

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.

Answer 1

@User28's solution (one of the comments below the question) works:

this.$refs.image.$refs.input.click()

Answer 2

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()
  }
}

Answer 3

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
})