Bind File Input To A Button Using Vue.js

I'm trying to bind a input file to a button using Vue.js Having the following: Copy

Vue.js:

methods: {
    chooseFiles: function() {
        document.getElementById("fileUpload").click()
    },
...

EDIT - Update syntax:

methods: {
    chooseFiles() {
        document.getElementById("fileUpload").click()
    },
...

Solution 2:

Simplest way to do this is to stylize a label element like a button, HTML only.

Solution 3:

you can use the label html tag for doing this like below

<label for="upload-file" class="css-class">
    <input type="file" id="upload-file" hidden @change="choosFile"/>
</label>

in this way you didn't need the button any more and you can customize the label with css as the way you like it

Solution 4:

Add a ref="file" to your <input> element and later use $refs.file to access it.

<input ref="file" type="file">
<div @click="selectFile()">click to select a file</div>

methods:{
  selectFile(){
    let fileInputElement = this.$refs.file;
    fileInputElement.click();

    // Do something with chosen file 
  }
}

👌 Demo: https://codepen.io/Jossef/pen/QWEbNGv

Solution 5:

This might help someone who is using coreui <CInputFile> tag.

for <CInputFile>, this.$refs.file.click() and this.$refs.file.$el.click() both doesn't work.

Because <CInputFile> wraps <div> around <input type="file">. so $el is actually a div element here, you need to go find the <input type="file"> tag and trigger the click() event on the <input type="file"> tag like this

this.$refs.file.$el.getElementsByTagName('input')[0].click().