Jasny Bootstrap - Hide submit button until file selected

Question

I'm using Bootstrap with the Jasny fork. I'm working on a form where users can upload images. I want to hide the submit button of the form until the user has actually selected an image. Ideally, the submit button should also disappear when the user removes the file from the form. This is the first time I actually used this fork. How would I do that?

<div class="fileupload fileupload-new" data-provides="fileupload">
  <div class="fileupload-new thumbnail" style="width: 114px; height: 64px;"><img src="http://www.placehold.it/114x64/EFEFEF/AAAAAA" /></div>
  <div class="fileupload-preview fileupload-exists thumbnail" style="width: 114px; height: 64px;"></div>
  <span class="btn btn-file"><span class="fileupload-new">Select image</span><span class="fileupload-exists">Change</span><input type="file" /></span>
  <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
  <button type="submit" class="btn btn-primary">Upload</button>
</div>

Answer 1

you have to add an event listener to the input field and listen for a change event. Then you have to check if the event target as a file selected by the user. I modified your code to add an id to the input field and the upload button check it at http://jsfiddle.net/LLfjE/

$('#file-input').on('change', function(evt) {
    var file = evt.target.files[0];
    if (file){
        $('#upload-btn').show();
    } else {
        $('#upload-btn').hide();
    }
});​