django - Django Crispy Forms ファイル アップロード フィールド

Question

クリスピー フォームを正しく作成したと思っていましたが、カスタム クリスピー フォームではなく、標準の Django フォームとしてレンダリングされています。

フォーム.py:

class MyForm(forms.Form):
    main_image = forms.ImageField()
    second_image = forms.ImageField()

    def __init__(self, *args, **kwargs):
        super(MyForm, self).__init__(*args, **kwargs)
        self.helper = FormHelper(self)
        self.helper.layout = Layout(
            Div(SmallFileField('main_image', 'second_image')),
        )

SmallFileField (ブートストラップに基づく):

{% load crispy_forms_field %}

<div id="div_{{ field.auto_id }}" class="control-group{% if form_show_errors%}{% if field.errors %} error{% endif %}{% endif %}{% if field.css_classes %} {{ field.css_classes }}{% endif %}">
  {% if field.label %}
      <label for="{{ field.id_for_label }}" class="control-label {% if field.field.required %}requiredField{% endif %}">
          {{ field.label|safe }}{% if field.field.required %}<span class="asteriskField">*</span>{% endif %}
      </label>
  {% endif %}

<div class="controls">
    <div class="fileupload fileupload-new" data-provides="fileupload">
      <div class="fileupload-new thumbnail" style="width: 20px; height: 20px;"><img src="http://www.placehold.it/20x20/EFEFEF/AAAAAA" /></div>
      <div class="fileupload-preview fileupload-exists thumbnail" style="width: 20px; height: 20px;"></div>
      <span class="btn btn-file"><span class="fileupload-new">Select image</span><span class="fileupload-exists">Change</span><input type="file" name="{{ field.html_name }}" id="id_{{ field.html_name }}" value="{{ field.value }}" /></span>
      <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
    </div>
    {% include 'bootstrap/layout/help_text_and_errors.html' %}
</div>

form.html

<form action='' enctype='multipart/form-data' method='post'>
{% crispy form %}
<input type="submit" value="{% trans "Submit" %}" class="btn"/>
</form>

PS。このフォームは、3 ステップのフォーム ウィザードの 1 ステップです。あなたのアイデアに感謝します！