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>

score 5 · Accepted Answer · edited Dec 08 '16 at 12:22

5

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

edited Dec 08 '16 at 12:22

ReggieB

8,100
3
38
46

answered Dec 06 '12 at 00:07

jxs

457
4
9

Ah! Excellent, I was stuck thinking how to alter the actual Jasny code. But this is much simpler. Thanks! – Krystian Dec 06 '12 at 02:00

score 5 · Answer 2 · answered Dec 08 '13 at 16:25

5

The selected answer works but you could also use on of Jasny's built-in events for this: 'change.bs.fileinput', like so:

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

answered Dec 08 '13 at 16:25

parrker9

958
14
23

Beter than the accepted answer . using the jasny's built-in event *change.bs.fileinput* is a better choice ! – TheByeByeMan Sep 10 '15 at 13:24

score 2 · Answer 3 · edited Apr 16 '13 at 15:30

2

Just use the built in class "fileupload-exists" on your submit button. This should make the button hidden until a file has been 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>

edited Apr 16 '13 at 15:30

VirtualTroll

3,077
1
30
47

answered Apr 16 '13 at 15:10

Fate

21
1

score 1 · Answer 4 · answered Aug 29 '13 at 12:44

1

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

answered Aug 29 '13 at 12:44

King

11
1

Jasny Bootstrap - Hide submit button until file selected

4 Answers4