Jasny Bootstrap - Hide the submit button until a file is selected

Question

I am using Bootstrap with Clear Fork . I am working on a form in which users can upload images. I want to hide the submit button of the form until the user displays the image. Ideally, the submit button should also disappear when the user removes the file from the form. This is the first time I have used this plug. How can I do it?

<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 need to add an event listener in the input field and listen for the change event. Then you should check if the target event is the target as a file selected by the user. I changed your code to add an identifier to the input field, and the download button is 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(); } });​ 

Answer 2

The selected answer works, but you can also use Jasny's inline events for this: 'change.bs.fileinput' , for example:

 $('.fileupload').on('change.bs.fileinput', function() { $(this).find('.btn').show(); }); 

Answer 3

Just use the built-in class "fileupload-exists" in your submit button. This should make the button hidden until the file is selected.

 <div class="fileupload fileupload-new" data-provides="fileupload" data-uploadtype="file"> <button type="submit" class="btn fileupload-exists"> <i class="icon-arrow-up"></i> Upload File</button> 

Answer 4

Just add "fileupload-exists" to the submit button class.