Bootstrap3 file input

Question

I am using the following bootstrap 3 html

          <form action="#" role="form">
                        <div class="form-group">
                            <div class="fileinput fileinput-new" data-provides="fileinput">
                                <div class="fileinput-new thumbnail" style="width: 200px; height: 60px;">
                                    <img id="logothumb" src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&amp;text=no+image" alt="" /> </div>
                                <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 60px;"> </div>
                                <div>
                                    <span class="btn default btn-file">
                                        <span class="fileinput-new"> Select image </span>
                                        <span class="fileinput-exists"> Change </span>
                                        <input type="file" name="..."  id="logo" 
                                            > </span>
                                    <a href="#" class="btn default fileinput-exists" data-dismiss="fileinput"> Remove </a>
                                </div>
                            </div>

                        </div>
                        <div class="margin-top-10">
                            <a href="#" class="btn green-haze" ng-click="file_changed()"> Upload </a>
                            <a href="#" class="btn default"> Cancel </a>
                        </div>
         </form>    

I have some javascript code to upload the file and also show an existing file from database when the code is first loaded.

         var fileUploadControl = $("#logo")[0];
          if (fileUploadControl.files.length > 0) {
             var file = fileUploadControl.files[0];

The problem is, the file upload control shows 'Select Image' even when there is a file present ie shown from database in the img src. It should show the 'Change' - 'Remove' options. How do i get it to do that. It does this when a file is selected for the very first time however.

Thanks

Answer 1

If I understand you correctly, you will have an image present when your page is loaded. However, you only want "Change" and "Remove" visible, with "Select Image" hidden. To do this, you can simply hide your span containing "Select Image" when the page loads.

$('span.fileinput-new').hide();

Now you have your active page. If the default image is removed, I assume you want to then hide "Change" and "Remove" and then display "Select Image" again. In this case, you can set an event on your file input and toggle these based on if a file is currently uploaded or not.

$('#logo').on('change', function() {
    // If a file is uploaded - hide "Select Image" and show "Change - Remove"
    if($(this).val().length) {
      $('span.fileinput-new').hide();
      $('span.fileinput-exists, a.fileinput-exists').show();
    // If a file is not uploaded - show "Select Image" and hide "Change - Remove"
    } else {
      $('span.fileinput-new').show();
      $('span.fileinput-exists, a.fileinput-exists').hide();
    }
});

- I played with this a while and have put together a JSFiddle that I think will help you out. -我玩了一段时间，并整理了一个JSFiddle，我认为它将对您有所帮助。

Check it out here