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>

Answer 1

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:

1. 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.

2. 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.

Answer 2

solved¡

<v-card class="mx-auto pt-2" elevation="0" color="#D6E5E5">
                  <label for="fileUpload">
                    <v-img
                      :src="
                        urlPreviewImage
                          ? urlPreviewImage
                          : 'https://cdn-icons-png.flaticon.com/512/1206/1206451.png?w=740&t=st=1685665297~exp=1685665897~hmac=896c6e31bc0520ef6ff64fb679d4fb25c4cc12abf386c0bb707dda62a85803b3'
                      "
                      max-height="200"
                      contain
                    ></v-img>
                  </label>

                  <v-file-input
                    id="fileUpload"
                    show-size
                    accept="image/*"
                    @change="selectFile"
                    truncate-length="50"
                    prepend-icon="mdi-image-area"
                    hide-details=""
                  >
                    <template v-slot:selection="{ index, text }">
                      <small v-if="index < 2" style="color: #196464;">
                        {{ text }}
                      </small>
                    </template>
                  </v-file-input>
                </v-card>