How to check input file is empty or not using JavaScript/jQuery?

Javascript jQuery Web Development Front End Technology

In JavaScript, while working with the form elements, we need to validate the input fields and form elements when a user enters the value. In this tutorial, we will work with the file input.

We will also learn to validate the file input. Sometimes, we may be required to check if the file is selected in the input field, then only enable the submit button; otherwise, disable the submit button. So, it will not allow users to submit the form or file without selecting it.

Validate the file input using JavaScript

In JavaScript, we can access the file input using the id, name, tag name, or class name. After that, we can check whether the file input field contains any file value. We can add the event listener to the file input for the change event. So, whenever the value of the file input changes, the event listener is invoked, and we can check whether the file input contains any file.

Syntax

Users can follow the syntax below to use JavaScript to check if the file input is empty or not.

fileInput.addEventListener("change", function () {
   if (fileInput.files.length == 0) {
      
      // file input is empty
   } else {
      
      // file is selected
   }
});

In the above syntax, we have added the event listener for the change event in the file input. Also, we have passed the function expression as a callback function, which checks whether any file is selected.

The file input contains the array of the file, and we can check if the length of the array is zero if any file is not uploaded to the file input.

Example

In this example, we have created the submit button. It is disabled at the start, and when the user uploads any single file, we enable the button using JavaScript. We have selected the file input by id and used the ‘files’ attribute, which is of array type, to check if any file is selected.

<html>
<body>
   <h2>Using the <i> JavaScript </i> to check whether file input is empty</h2>
   <input type = "file" id = "fileInput" /><br /><br />
   <button id = "click" disabled>Submit File </button>
   <script>
      let clickButton = document.getElementById("click");
      let fileInput = document.getElementById("fileInput");
      fileInput.addEventListener("change", function () {
         
         // check if the file is selected or not
         if (fileInput.files.length == 0) {
            clickButton.disabled = true;
            clickButton.opacity = 0.3;
         } else {
            clickButton.disabled = false;
            clickButton.style.opacity = 1;
         }
      });
   </script>
</body>
</html>

Validate the file input using jQuery

jQuery is one of the most used JavaScript libraries, which provides easy and clean syntax to write the code. We can use the jQuery with the HTML code by adding its CDN into the <head> tag of the HTML code.

As we can access the file input in JavaScript, we can also access it in jQuery using various methods. After that, we can check the length of the ‘files’ attribute of the file input to ensure whether the file input is empty or not.

Syntax

Users can follow the syntax below to use jQuery to check if the file input contains any file

let files = $("#fileInput")[0].files.length;
if (files != 0) {
   
   // file selected
} else {
   
   // file not selected
}

In the above syntax, we have selected the file input by its id. The ‘#’ represents the id.

Example

In the example below, we have created the validateFileInput() button, which invokes when the user clicks on the ‘click me’ button. The function selects the file input by id, checks the length of its ‘files’ attribute, and shows the validation message to the users on the screen.

<html>
<head>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity = "sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin = "anonymous" referrerpolicy = "no-referrer"></script>
</head>
<body>
   <h2>Using <i>jQuery </i> to check if the file input is empty or not</h2>
   <input type = "file" id= "fileInput" /><br /><br />
   <button id = "click" onClick = "validateFileInput()"> Click me </button>
   <p id = "output"> </p>
   <script>
      let output = document.getElementById("output");
      function validateFileInput() {
         let files = $("#fileInput")[0].files.length;
         if (files != 0) {
            output.innerHTML += "File is selected! <br/>";
         } else {
            output.innerHTML += "Please, select a file!<br>";
         }
      }
   </script>
</body>
</html>

Users learned to validate the file input using JavaScript or JQuery. In both examples, we have accessed the file input using the id. However, users can access the file input using either class name, tag name, or name and check the length of the ‘files’ attribute to ensure whether the file input is empty or any file is selected.