trigger b-form-file after clicking on b-button

Question

I'm working with BootstrapVue and I want to trigger my b-form-file after clicking on my b-button , because of style cases. I also want to have the b-form-file hidden it shouldn't been seen anywhere.

I've tried to do it like following but this doesn't work out for me..

<b-button variant="danger" @click="$refs.upload.click()">Upload</b-button>

<b-form-file ref="upload"></b-form-file>

Please let me know if you have any idea how I can fix that! Thank You!

-> I want to advoid jQuery code and I can't use base HTML input - I need b-form-file

Answer 1

You must required to make a method for click on for example:

<b-button variant="danger" @click="open">Upload</b-button>
<b-form-file id="upload"></b-form-file>

<script>
     export default {
          methods: {
            open: ()=> {document.getElementById('upload').click()},
          }
     }
</script>