Vue Js Trigger/Open Input file onclick button:To trigger/open an input file dialog in Vue.js when a button is clicked, you can utilize the ref attribute and a combination of JavaScript and Vue directives. First, create a reference for the input element using ref, such as ref="fileInput". Next, assign a click event to the button that calls a method, for example, @click="openFileInput". In the method, use this.$refs.fileInput.click() to programmatically trigger the click event of the input element, which will open the file dialog. With just a button click, you can now initiate the file selection process in Vue.js.

How can I trigger/open an input file dialog in Vue.js when a button is clicked?

In this Vue.js code snippet, there is a <div> element with the id attribute set to “app”. Inside the <div>, there is an <input> element with the ref attribute set to “fileInput”. The type of the input is set to “file”, and it is styled to have a display of “none”. The input has an @change event listener that calls the “handleFileChange” method.

Below the input, there is a <button> element with an @click event listener that triggers the “openFileInput” method when clicked.

The “openFileInput” method is responsible for triggering the click event on the hidden file input element by accessing it using this.$refs.fileInput.click().

The “handleFileChange” method is called when a file is selected using the file input. It receives the event object as a parameter, and the selected file can be accessed using event.target.files[0]. In this example, the selected file is logged to the console, but you can perform any desired action with the selected file.

Vue Js Trigger/Open Input file onclick button

<div id="app">
    <input ref="fileInput" type="file" style="display: none;" @change="handleFileChange">
    <button @click="openFileInput">Open File</button>
  </div>
  <script type="module">
    const app = Vue.createApp({
      methods: {
        openFileInput() {
          this.$refs.fileInput.click();
        },
        handleFileChange(event) {
          const selectedFile = event.target.files[0];
          console.log(selectedFile)
          // Do something with the selected file
        }
      }
    });

    app.mount('#app');
  </script>

Output of Vue Js Trigger/Open Input file onclick button