How to check if one of the file input types has value?

Question

I have many of these input types:

<input type="file" name="file_upload">

And when the submit button is clicked, I want to check via JS if one these fields are not empty (in other words, there is at least one file is uploaded).

Here's my code which doesn't work:

$('#upload-button').live('click', function () {
  var has_selected_file = $('input[type=file]').val();

  if (has_selected_file) {
    /* do something here */
  }
  else {
    alert("No file selected");
  }
});

This always alerts no file selected.

Answer 1

Use .filter() to findout input element with a value, and check the length

$('#upload-button').live('click', function () {
    var has_selected_file = $('input[type=file]').filter(function(){
        return $.trim(this.value) != ''
    }).length  > 0 ;

    if (has_selected_file) {
        /* do something here */
    }
});

Answer 2

you could just do:

var has_selected_file = $.trim( $('input[type=file]').val());

if (has_selected_file != "") {
    /* do something here */
}
else {
    alert("No file selected");
}

Answer 3

Did you try to handle change instead of click?

It seems working here:

jQuery - Detecting if a file has been selected in the file input