How do I check if a file has been selected in a 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?

Think it through, then. How do you get the value of an input using jQuery? Really quick search turns up `val()`. So, now you can get the value, how do you check the length of it? Really quick search turns up the `length` property. How do you add a second condition to the if statements that are already there? A quick search turns up `&&` and `||`. This is the basic learning process. Did you try? — Chris Baker, Jul 18 '14 at 15:03
thanks chris i knew how to check the value i just wanted to combine it properly and i think its a good question but everytime i ask a question related to jquery I get dinged negatively because the question is easy.. — nolawi, Jul 18 '14 at 17:38
@nolawipetros, StackOverflow has had many low quality questions come through within the last year. As a result, they are more strict than they used to be. I think it will pass though. A lot of people are working on making things better. — 700 Software, Jul 18 '14 at 18:51
@Chris and George thanks I did try and made it work via the OR operator but making it work is not the most efficient as there are many ways to do simple things in js and jquery. I spend a lot of on the CSS/Bootrap tags answering q's and it just seems to me that the jquery/js group seems to be the harshest. Anyways thanks for your inputs! — nolawi, Jul 18 '14 at 18:58

score 13 · Accepted Answer · answered Jul 18 '14 at 15:06

13

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

answered Jul 18 '14 at 15:06

Karl-André Gagnon

33,662
5
50
75

is it possible to make this work in ie9? for some reason in doesnt work in IE9 – nolawi Aug 01 '14 at 14:44
@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 : http://stackoverflow.com/questions/2389341/jquery-change-event-to-input-file-on-ie. I will have to take a look at it tonight. – Karl-André Gagnon Aug 01 '14 at 16:03
@nolawipetros Out of curiosity, what was the problem? – Karl-André Gagnon Aug 07 '14 at 15:24
the change was not being detected on the `#inputfile`and i had to ` $('.upload-block input, #Inputfile').change...` for it to work? – nolawi Aug 08 '14 at 13:27
1

How do I do this with native JavaScript ? – Oniya Daniel Mar 13 '17 at 12:24

score 7 · Answer 2 · answered Jul 18 '14 at 15:00

7

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
}

answered Jul 18 '14 at 15:00

Bhojendra Rauniyar

83,432
35
168
231

This is simpler `$('#InputFile').val().trim().length` – Dec 18 '19 at 13:20
@Samad `.trim()` is a core JavaScript method whereas `$.trim()` is a jQuery method. – Bhojendra Rauniyar Dec 18 '19 at 18:05
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,"");` – Dec 21 '19 at 11:22

Andrew · Answer 3 · 2014-12-28T22:52:16.410

6

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

edited Dec 28 '14 at 22:52

answered Dec 28 '14 at 22:46

Andrew

36,676
11
141
113

score 2 · Answer 4 · answered Aug 06 '14 at 11:45

  $('.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

score 1 · Answer 5 · answered Jul 18 '14 at 15:09

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);
});

How do I check if a file has been selected in a element?

5 Answers5

Linked