How to check if input file is empty in jQuery

Essential ingredients for client-side validation

There are 3 key attributes of effective client-side validation process: usability, security, and a sprinkle of good old fun. Let's see what we can whip up:

Unique IDs: Avoiding the identity crises

Ensure a unique ID is assigned to your file input for jQuery to have a smooth ride with its selections. Sounds like good manners, doesn't it?

if ($('#myFabulousFileInput').get(0).files.length === 0) {
    alert('No file elected. Please nominate a file before submitting.');
} else {
    // File has been selected, we are ready for launch!
}


Debugging and feedback: Making sense of the noise

Use console.log to decipher the mysterious messages that might show up during debugging. Additionally, surprise your users with useful error messages if they forget to select a file.

Form submission: The final frontier

We stop the form submission in its tracks using e.preventDefault() should our validation checks fail. Ideally, we should ensure the file input isn't empty right before submitting the form:

$('#myForm').submit(function(e) {
    var fileInput = $('#myUniqueFileInput').get(0).files;
    if (fileInput.length === 0) {
        e.preventDefault();
        alert('Don\'t make me do the walk of shame! Please upload a file.');
    } 
    // Else, engage warp speed for form submission!
});


Turbocharging your validation routine

Validation doesn't end at checking emptiness. Let's put in some extra effort to cover more scenarios and give our users a refined experience.

Anticipating various outcomes

Think one step ahead and foresee various scenarios; like a file that's too large or one with an unsupported type. Let's make sure our validation routine is as flawless as a ballet dancer's pirouette:

$('#myForm').submit(function(e) {
    var fileInput = $('#myFile').get(0).files;
    if (fileInput.length === 0) {
        e.preventDefault();
        alert('File-less and fancy free? That\'s not how we roll. Please select a file.');
    } else if (fileInput[0].size > 10485760) { // Free tip: This is 10MB.
        e.preventDefault();
        alert('Whoa, that file\'s larger than my self-esteem! Please select a smaller file.');
    }
});


Improving user experience: Show, don’t tell

Besides simply stopping a submission, try visual cues or detailed messages alongside the alert for a cozy user experience:

if ($('#myFile').val()) {
    // Input has a file, proceed to stage two.
    $('#feedbackMessage').text('File ready for launch!').addClass('success');
} else {
    // Input is empty, raise the alarm.
    $('#feedbackMessage').text('Warning! Please select a file').addClass('error');
}


Why stop at empty checks?

There's more to input validation than just checking for emptiness. Let's explore!

Bypassing jQuery with style

Sometimes, your validation might crave some raw JavaScript, maybe for some unique complex situations. Looking at you, document.getElementById! Also consider the FileList and FileReader APIs for intricate file handling.

Timing matters

Wrap up your validation logic in a handy jQuery document ready function to ensure no DOM elements go unnoticed:

$(document).ready(function() {
    // Your file doesn't stand a chance now, prepare for validation!
});


The journey continues

Improve upon your code with mass amounts of practice and joining our stack-wizard community feedback. A friendly advice: code comments do improve readability:

// Check if file input is empty on form submission. Spoiler: it is.
// Poison the users with error messages if required.
