Friday, September 5, 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
32267 POSTS0 COMMENTS
Milvus
81 POSTS0 COMMENTS
Nango Kala
6635 POSTS0 COMMENTS
Nicole Veronica
11801 POSTS0 COMMENTS
Nokonwaba Nkukhwana
11865 POSTS0 COMMENTS
Shaida Kate Naidoo
6752 POSTS0 COMMENTS
Ted Musemwa
7026 POSTS0 COMMENTS
Thapelo Manthata
6703 POSTS0 COMMENTS
Umr Jansen
6720 POSTS0 COMMENTS