How to trigger v-input-file from a v-btn

Question

I want to trigger a hidden v-input-file by clicking a v-btn. I can do it with the regular input file, but I prefer to use v-input-file. Here is what I have done so far but it is not working.

<v-card-text class="pt-6" style="position: relative;">
    <v-btn
        absolute
        color="orange"
        class="white--text"
         fab
         small
         right
         top
         @click="$refs.avatarInput.$el.click($event)"
      >
         <v-icon>mdi-camera</v-icon>
      </v-btn>
      <v-file-input
         v-show="true"
         ref="avatarInput"
         accept="image/png, image/jpeg, image/bmp"
         placeholder="Pick an avatar"
         prepend-icon="mdi-camera"
         label="Avatar"
      ></v-file-input>
   </v-card-text>

score 0 · Answer 1 · answered Jul 24 '20 at 08:15

An input[type="file"] can't be fired this way due to security reasons.

Check this answer for more details https://stackoverflow.com/a/29873845/553073

Here are some options:

Instead of a v-btn, use a label with for="idOfFileInput", make it looks like a button if you like. Click on the label will trigger the file input.
Set z-index and opacity=0 on the file input and place it right on top of your button, so when user clicks the button the file input get clicked instead.

How to trigger v-input-file from a v-btn

1 Answers1