How to Check If File Input is Empty with Javascript

Online web forms make it possible for website visitors to send information and data to the websites they are visiting. In a way, they let the user communicate with the website by filling out some input fields and submitting it (e.g. contact forms, registration forms, settings forms, surveys, etc.). Forms are not only useful for submitting text-based information such as your name, address, email, phone or message but they are also useful for submitting files such as images, text documents or PDF reports.

Whether you are building a website, a web application or a mobile app, validating your forms is utmost important to make sure things will work as expected and to eliminate any security holes in your design. For example, making the form fields required if your form has fields that the user must not leave empty and limiting the number of characters for input fields if entering only a certain number of characters is allowed, e.g. a 10-digit phone number, are some of the things that can be done to validate a form.

Why Check File Input Fields with JavaScript?

When it comes to forms in web programming, there are two types of form validation which are implemented to ensure that the user has provided the required information and provided it in the acceptable format. The first validation type is the server-side form validation which is handled on the server after the form is submitted. The second type is the client-side form validation which is handled on the client (web browser) before the form is submitted. The server-side validation is done by a server-side programming language like PHP, Python or ASP.NET, depending on which one you are using on your project. Whereas, the client-side validation is done by a client-side scripting language like JavaScript.

In an ideal form design, you should do both validations in your code. The server-side validation will take care of the scenario where the user has blocked scripts from running on the browser (hence JS validation won't work), and the client-side validation will take care of the validation on the browser, reducing the server load and providing quicker feedback to the user.

Reducing the server load is important because if a lot of users try to submit the form at the same time, this will cause your server to run slow or even become inaccessible for some of them. Especially if your website is hosted on cheap shared hosting, excessive use of non-optimized scripts will keep the server busier than it is really necessary and it may result in your account to get suspended, requiring you an upgrade.

In another tutorial, we covered how to check if file input is empty with PHP, which showed how to validate file input on the server side. We will now focus on the file validation on the client side.

JavaScript Check If File Input Field is Empty

Note that, our check will not deal with the file type or other things, it will just focus on whether the file input is empty or not on form submission. Also, keep in mind that this will work only on browsers where JS is enabled, which practically covers most users in the world.

We start with creating a sample HTML file, e.g. form.html. You can edit HTML files with any text editor such as Notepad, TextEdit or Notepad++.

We insert a simple form with a file input field and a submit button on our page using the following code:

<form action="" method="post" enctype="multipart/form-data">
  <input type="file" name="file" id="file">
  <input type="submit" name="submit" id="submit" value="Submit">
</form>

You can give any name and id values to the file input element and submit button but keep in mind that you will be using those values for handling the validation and then processing the form on the server side. Also note the use of enctype attribute with a value of multipart/form-data for the form element. This attribute is required for web forms with file inputs, otherwise the form won't work.

The above form will look like the following:

Since there's no validation yet, the above form will submit when you click the Submit button, even if you haven't selected any files. Though, it won't do anything other than refreshing this page as it is just a sample form with no action.

Next, we implement the form validation via file input check using JavaScript like the following:

document.getElementById("submit").onclick = function(e) {
  if (document.getElementById("file").value == "") {
    e.preventDefault();
    alert("Please select a file.");
  }
}

What we did is that we assigned a function to the onclick event of the submit button, so that it will trigger when it is clicked, which means this function will run just at the instant the form is submitted, before it is sent to the server. In that function, we check the file input field's value. If it's empty, we prevent the form from submitting using e.preventDefault() and display a notice to the user using alert(). So, if the user tries to submit the form without selecting a file first, the form will not be submitted and a notice will be displayed.

The resulting form with JS file input validation will function like the following:

First, try submitting the form without selecting a file. You will see an alert is displayed. Then, try submitting the form after selecting a file. The form will be submitted, although in this example it will be just a page refresh.

f t g+ in