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

16 Oct, 2019
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:
javascript-basics
jQuery-Basics
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Difference between var, let and const keywords in JavaScript
Convert a string to an integer in JavaScript
Differences between Functional Components and Class Components in React
How to append HTML code to a div using JavaScript ?
How to Open URL in New Tab using JavaScript ?
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?