How do I check if a file has been selected in a <input type="file"> element?

Question

I have multiple checkboxes and a file upload input. I would like to re-enable a button if one or more checkbox's are checked AND if the input value is not null.

Here is a link to bootply

Here my html

<div class="upload-block">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="file" id="InputFile">
    <button id="upload-btn" type="button blue-button" 
            class="btn blue-button" disabled>Submit</button>

</div>

Here is my javascript starting point: Updated via Karl Bind a change event on all input and then use some condition:

  $('.upload-block input').change(function() {
    $('#upload-btn').prop(
        'disabled',
        !($('.upload-block :checked').length && $('#InputFile').val()));
  });

Example

This works for all the checkboxes and #InputFile has a value other than none. i.e. where a file has been chosen. However this does not work in IE9

How can I update this to work in IE9?

Solution 1

Bind a change event on all input and then use some condition:

  $('.upload-block input').change(function() {
    $('#upload-btn').prop(
        'disabled',
        !($('.upload-block :checked').length && $('#InputFile').val()));
  });

Example

Solution 2

Like this:

if($('#InputFile').val().length){
//do your stuff
}

You can better use by using $.trim() method not to allow (trim) spaces:

if($.trim($('#InputFile').val()).length){
//do your stuff
}

Solution 3

Pure JS:

<input type="file" id="InputFile">
<button onclick="buttonSubmitClicked(event)">Submit</button>

<script>
    function buttonSubmitClicked(event) {

        if (!document.getElementById("InputFile").value) {
            event.preventDefault();
            alert("Please choose a file!");
        } else {
            alert("File've been chosen");
        }
    }
</script>

jsfiddle: check it out

Solution 4

  $('.upload-block input').change(function() {
        if ($('.upload-block :checked').length && $('#InputFile').val() ) {

          $('#upload-btn').prop('disabled',false);
        }
        else {
          $('#upload-btn').prop('disabled',true); 
        }
         });

No need of separate selectors for checkbox and input file .upload-block input is enough to catch catch both the checkbox and file value change

Solution 5

I would apply the validation to all elements involved. This way changing either the checkboxes or the input will update disabled

$('#InputFile, .upload-block :checkbox').change(function(){
   var isValid= $('.upload-block :checkbox:checked').length  && $('#InputFile').val();
   $('#upload-btn').prop('disabled',isValid);
});

View more solutions

Comments

[nolawi]

is it possible to make this work in ie9? for some reason in doesnt work in IE9

[Karl-André Gagnon]

@nolawipetros i whish i could help you now, but i don't have access to IE9 here. But, from what i've read, it should work on ie9 : stackoverflow.com/questions/2389341/…. I will have to take a look at it tonight.

[Karl-André Gagnon]

@nolawipetros Out of curiosity, what was the problem?

[nolawi]

the change was not being detected on the #inputfileand i had to ` $('.upload-block input, #Inputfile').change...` for it to work?

[Oniya Daniel]

How do I do this with native JavaScript ?

[Admin]

This is simpler $('#InputFile').val().trim().length

[Bhojendra Rauniyar]

@Samad .trim() is a core JavaScript method whereas $.trim() is a jQuery method.

[Admin]

Thanks , but jQuery also use JavaScript core methods to do it , and both have same results _____________ return text==null?"":(text+"").replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\‌​xA0]+$/g,"");