VueJS: trigger input file from button
Vue style
This might be easier
<input type="file" ref="file" style="display: none"><button @click="$refs.file.click()">open file dialog</button>If more is needed then $refs.file.$el should pointing to the DOM element. Here are the Properties and Methods that you can use.
This is a quick, simple and dirty solution, but it works for me. Create a regular HTML file input, hide it with CSS, or with VueJS. Add a v-on:change event to the hidden file input.
<input id="fileInput" type="file" style="display:none" v-on:change="yourVueMethod()"/>Create a button that will trigger the click event of the input field.
<button id="fileInputButton" onclick="document.getElementById('fileInput').click()">Open File</button>And you can now do whatever you want in your method, just as normally. May not be the best solution, but easy to do.