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

Given an HTML document containing input element and 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 file is selected.

Example: This example implements the above approach.

<!DOCTYPE HTML>  
<html>  
  
<head>  
    <title>  
        How to check input file is empty 
        or not using JavaScript? 
    </title> 
</head> 
  
<body style = "text-align:center;">  
      
    <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>  
</body>  
  
</html> 

Output:

Before clicking on the button:
After clicking on the button:

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.

<!DOCTYPE HTML>   
<html>   
  
<head>  
    <title>  
       JavaScript | Check if input file is empty. 
    </title> 
  
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 
    </script> 
</head> 
  
<body style = "text-align:center;">   
      
    <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>  
</body>   
  
</html> 

Output:

Before clicking on the button:
After clicking on the button:

My Personal Notes

Recommended Posts: