title: Django with Bootstrap-file-upload
body: <p>I'm using a <code>Django</code> form to load an image and I'm using <code>Bootstap-fileinput</code>.</p>
  
  <p>When the form has already been initialised with an image I want the image displayed immediately but it simple shows no image currently.  How do I get the template to automatically show the <code>file-input-exists</code> version of the Bootstap HTML rather than the <code>file-input-new</code> version? </p>
  
  <p>Forms.py :</p>
  
  <pre><code>class MyModelForm(forms.ModelForm):
      class Meta:
          model = MyModel
          fields = ['image',]
          widget = {
              'image' : forms.FileInput(attrs={'class': 'form-control',
                                               'id' : 'input-file'}),
              }
  </code></pre>
  
  <p>My template has:</p>
  
  <pre><code>{{form.image}}
  {{form.image.errors}}
  </code></pre>
  
  <p>This generates the following HTML whether the form contains an image or not</p>
  
  <pre><code>&lt;div class="file-input file-input-new"&gt;&lt;div class="file-preview "&gt;
      &lt;div class="close fileinput-remove"&gt;×&lt;/div&gt;
      &lt;div class=""&gt;
          &lt;div class="file-preview-thumbnails"&gt;&lt;/div&gt;
          &lt;div class="clearfix"&gt;&lt;/div&gt;    
          &lt;div class="file-preview-status text-center text-success"&gt;&lt;/div&gt;
          &lt;div class="kv-fileinput-error file-error-message" style="display: none;"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="kv-upload-progress hide"&gt;&lt;/div&gt;
  &lt;div class="input-group "&gt;
     &lt;div tabindex="500" class="form-control file-caption  kv-fileinput-caption"&gt;
         &lt;div class="file-caption-name"&gt;&lt;/div&gt;
     &lt;/div&gt;
  
     &lt;div class="input-group-btn"&gt;
         &lt;button type="button" tabindex="500" title="Clear selected files" class="btn btn-default fileinput-remove fileinput-remove-button"&gt;&lt;i class="glyphicon glyphicon-trash"&gt;&lt;/i&gt; Remove&lt;/button&gt;
         &lt;button type="button" tabindex="500" title="Abort ongoing upload" class="btn btn-default hide fileinput-cancel fileinput-cancel-button"&gt;&lt;i class="glyphicon glyphicon-ban-circle"&gt;&lt;/i&gt; Cancel&lt;/button&gt;
  
         &lt;div tabindex="500" class="btn btn-primary btn-file"&gt;&lt;i class="glyphicon glyphicon-folder-open"&gt;&lt;/i&gt; &amp;nbsp;Browse …&lt;input class="form-control" id="input-file" name="image" type="file" required=""&gt;&lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>** EDIT **
  Thanks to help so far I now have the images showing, but if I try and resubmit the form I get a message that no file has been chosen.  I need to pick this up as well.</p>
  
  <p>I've added this JavaScript in order to display the image on loading.</p>
  
  <pre><code>    &lt;script&gt;
  
      $("#input-file").fileinput({
          showUpload: false,
          initialPreviewShowDelete: false,
  
          {% if form.instance.image %}
          initialPreview: [
              "&lt;img src='{{ form.instance.image.url }}' class='file-preview-frame'&gt;",
          ],
          initialPreviewConfig: [
              {caption: "{{ form.instance.image.name}}",},
          ],
          {% endif %}
      });
  
      &lt;/script&gt;
  </code></pre>