I'm having a trouble to combine bootstrap upload form with django form (crispy forms). Any idea how to put crispy forms to bootstrap form.

This is django crispy forms

        <form method="post" enctype="multipart/form-data">
              {% csrf_token %}
              {{ form|crispy }}
              <button type="submit" class="btn btn-primary">Upload and Download!</button>
        </form>

This is bootstrap form where I want to put crispy form.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="custom-file-label" for="customFile">Choose file</label>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Any idea how to combine these two?

CodePudding user response：

you can do something like this

        <form action="." method='POST' enctype="multipart/form-data">
        {% csrf_token %}
    <div class="custom-file">
  <input type="file" class="custom-file-input" name="file" id="customFile">
  <label class="custom-file-label" for="customFile">Choose file</label>
</div> <br><br>
    <button type="submit" class="btn btn-primary">Upload and Download!</button>
    </form>

and add this to the head of your page

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

and in your views.py to get the file you can use files = request.Files['file']