2

I have form where the user can upload a file but I want the upload button to be disabled if the input type file does not contain a file how do I do that ?

<form action="/upload" method="post" enctype="multipart/form-data">
    <div class="form-inline">
        <div class="form-group">
            <input type="file" name="fileUploaded">
        </div>
        <button type="submit" class="btn btn-sm btn-primary">Upload file</button>
    </div>
</form>
bozzmob
  • 12,364
  • 16
  • 50
  • 73

2 Answers2

3

you should add attribute disabled to the button

<button type="submit" class="btn btn-sm btn-primary" disabled>Upload file</button>

then we will watch changes with the code to enable the button when the input type file contain any file

$('input[type=file]').change(function(){
    if($('input[type=file]').val()==''){
        $('button').attr('disabled',true)
    } 
    else{
      $('button').attr('disabled',false);
    }
})

Demo here : https://jsfiddle.net/IA7medd/08eekkbt/

Ahmed Salama
  • 2,795
  • 1
  • 11
  • 15
0

Have a look here.

I like this solution from the linked post: 

<input type="file" id="selectedFile" style="display: none;" />
<input type="button" value="Browse..." onclick="document.getElementById('selectedFile').click();" />
Community
  • 1
  • 1
Cyril Iselin
  • 596
  • 4
  • 20