Friday, September 26, 2025
HomeLanguagesJavascriptHow to check input file is empty or not using JavaScript/jQuery ?

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

Given an HTML document containing input element, the task is to check whether an input element is empty or not with the help of JavaScript. 

Approach 1: Use element.files.length property to check file is selected or not. If element.files.length property returns 0 then the file is not selected otherwise the file is selected.

 Example: This example implements the above approach. 

html




<h1 style="color:green;">
    GeeksForGeeks
</h1>
  
<p id="GFG_UP" style="font-size: 15px; font-weight: bold;">
</p>
  
<input type="file" name="File" id="file" />
  
<br><br>
  
<button onclick="GFG_Fun()">
    click here
</button>
  
<p id="GFG_DOWN" style="color:green; font-size: 20px; font-weight: bold;">
</p>
  
<script>
    var up = document.getElementById('GFG_UP');
    var down = document.getElementById('GFG_DOWN');
    var file = document.getElementById("file");
          
    up.innerHTML = "Click on the button to see"
                + " if any file is selected";
      
    function GFG_Fun() {
        if(file.files.length == 0 ){
            down.innerHTML = "No files selected";
        } else {
            down.innerHTML = "Some file is selected";
        }
    }
</script>


Output:

 

Approach 2: Use element.files.length property in jQuery to check the file is selected or not. If element.files.length property returns 0 then the file is not selected otherwise file is selected. 

Example: This example implements the above approach. 

html




<script src=
</script>
<h1 style="color:green;">
    GeeksForGeeks
</h1>
  
<p id="GFG_UP" 
   style="font-size: 15px; font-weight: bold;">
</p>
  
<input type="file" 
       name="File" 
       id="file" />
  
<br><br>
  
<button onclick="GFG_Fun()">
    click here
</button>
  
<p id="GFG_DOWN" 
   style="color:green; font-size: 20px; font-weight: bold;">
</p>
  
<script>
    var up = document.getElementById('GFG_UP');
    var down = document.getElementById('GFG_DOWN');
      
    up.innerHTML = "Click on the button to see"
                + " if any file is selected";
      
    function GFG_Fun() {
        if ($('#file')[0].files.length === 0) {
            down.innerHTML = "No files selected";
        } else {
            down.innerHTML = "Some file is selected";
        }
    }
</script>


Output:

 

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
RELATED ARTICLES

Most Popular

Dominic
32321 POSTS0 COMMENTS
Milvus
84 POSTS0 COMMENTS
Nango Kala
6690 POSTS0 COMMENTS
Nicole Veronica
11857 POSTS0 COMMENTS
Nokonwaba Nkukhwana
11912 POSTS0 COMMENTS
Shaida Kate Naidoo
6802 POSTS0 COMMENTS
Ted Musemwa
7073 POSTS0 COMMENTS
Thapelo Manthata
6761 POSTS0 COMMENTS
Umr Jansen
6768 POSTS0 COMMENTS