Vue.js is a cool tool for making websites interactive. Imagine you have a form with a file upload. You probably don’t want users to submit the form if they haven’t selected a file. Here’s a simple way to make the “Submit” button disabled when no file is selected using Vue.js.

Conditionally Enable/Disable Submit Button with File Input in Vue js

In this simple HTML structure, we have an input file element and a submit button. The key lies in dynamically binding the ‘disabled’ attribute of the submit button to a method that checks whether the file input is empty or not.

Disable Submit Button When File Input is Empty in Vue js

<div id="app">
    <h3>Vue Js Disable Submit Button if Input File is Empty</h3>
  <!-- Input file element -->
    <input type="file" v-on:change="updateFile" />

    <!-- Submit button with dynamic 'disabled' attribute -->
    <button v-bind:disabled="isFileEmpty" v-on:click="submitForm">Submit</button>
  </div>

Validate File Input and Enable Submit Button Accordingly in Vue.js

In the Vue.js script, we create an instance of Vue, define the selectedFile data property to track the chosen file, and implement methods for updating the file and handling form submission. The isFileEmpty computed property evaluates whether the file input is empty, and this property is used to dynamically disable the submit button.

Dynamically Disable Submit Button Based on File Selection in Vue js

 <script>
    const app = new Vue({
      el: "#app",
    data() {
        return {
          selectedFile: null,
        };
      },
      methods: {
        updateFile(event) {
          // Update selectedFile when the file input changes
          this.selectedFile = event.target.files[0];
        },
        submitForm() {
          // Handle form submission logic here
          console.log("Form submitted!");
        },
      },
      computed: {
        isFileEmpty() {
          // Check if the selectedFile is empty or not
          return this.selectedFile === null;
        },
      },
    });
  </script>

Output of Vue Js Disable Submit Button If Input File Is Empty

To summarize, this approach ensures that the “Submit” button remains disabled when no file is selected, providing a seamless and user-friendly experience. Vue.js, with its reactive and declarative nature, simplifies handling such dynamic behavior in web applications.