title: django-crispy-forms for jasny file upload
body: <p>I am using django-crispy-forms (<a href="http://django-crispy-forms.readthedocs.org/" rel="nofollow noreferrer">http://django-crispy-forms.readthedocs.org/</a>) and I am trying to use Jasny Bootstrap file upload (<a href="http://jasny.github.io/bootstrap/javascript.html#fileupload" rel="nofollow noreferrer">http://jasny.github.io/bootstrap/javascript.html#fileupload</a>) to make my webpage look nicer. </p>
  
  <p>As far as I am aware, Crispy forms out of the box does not support Jasny file upload. As I am not very experienced, I am trying to use whatever is available in Crispy forms rather than to create my own layout objects. However, I have tried for several days now, and it doesn't work.</p>
  
  <p>I know this is not the right way to do it, but my attempt so far has been to try to use Crispy-form's Div in forms.py to make django generate something similar to the example code for Jasny file upload.</p>
  
  <p>Code from Jasny file upload:</p>
  
  <pre><code>&lt;div class="fileupload fileupload-new" data-provides="fileupload"&gt;
      &lt;div class="fileupload-new thumbnail" style="width: 200px; height: 150px;"&gt;&lt;img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&amp;text=no+image" /&gt;&lt;/div&gt;
      &lt;div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;"&gt;&lt;/div&gt;
      &lt;div&gt;
          &lt;span class="btn btn-file"&gt;&lt;span class="fileupload-new"&gt;Select image&lt;/span&gt;&lt;span class="fileupload-exists"&gt;Change&lt;/span&gt;&lt;input type="file" /&gt;&lt;/span&gt;
      &lt;a href="#" class="btn fileupload-exists" data-dismiss="fileupload"&gt;Remove&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Excerpt from my forms.py:</p>
  
  <pre><code>       Div(
             HTML("""&lt;div class="fileupload fileupload-new" data-provides="fileupload"&gt;
  &lt;div class="fileupload-new thumbnail" style="width: 200px; height: 150px;"&gt;&lt;img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&amp;text=no+image" /&gt;&lt;/div&gt;
          &lt;div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;"&gt;&lt;/div&gt;
          &lt;div class"smalltest"&gt;
              &lt;span class="btn btn-file"&gt;&lt;span class="fileupload-new"&gt;Select image&lt;/span&gt;&lt;span class="fileupload-exists"&gt;Change&lt;/span&gt;
      """),
            Field('photo1'),
            HTML("""&lt;/span&gt;&lt;a href="#" class="btn fileupload-exists" data-dismiss="fileupload"&gt;Remove&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;"""),
            css_class = 'photofield'
           ),
  </code></pre>
  
  <p>It is very ugly code and it does not work, because I still get the original "Choose File" button inside the new buttons.</p>
  
  <p>I am very grateful for anyone who can help! I have been getting quite frustrated and pulling out a lot of hair trying to make this work :(</p>
  
  <p>Many thanks.</p>