Bootstrap 4: Prettier File Inputs

File inputs don’t look too great

They should look more like:

Ours:

<input type="file" name="photo" class="clearablefileinput" id="id_photo">

What it should be closer to:

<label class="custom-file">
  <input type="file" name="photo" id="id_photo" class="custom-file-input">
  <span class="custom-file-control"></span>
</label>

[hectormartinezdev]

Hey! I think that here is proper place to put this, even if its closed.

The template at crispy_forms/templates/bootstrap4/layouts/field_file.html, has this content on the branch master:

{% load crispy_forms_field %}

<div class="custom-file {{ field_class }}">
    {% crispy_field field 'class' 'custom-file-input' %}
    <label class="custom-file-label" for="{{ field.id_for_label }}">Choose file</label>
</div>

Which is great, but needs {% include 'bootstrap4/layout/help_text_and_errors.html' %} at the end to show the errors. So it will become:

{% load crispy_forms_field %}

<div class="custom-file {{ field_class }}">
    {% crispy_field field 'class' 'custom-file-input' %}
    <label class="custom-file-label" for="{{ field.id_for_label }}">Choose file</label>
    {% include 'bootstrap4/layout/help_text_and_errors.html' %}
</div>

I checked the dev branch and this file doesn’t exist, even the branch is more recent than master. On the network insight graph it shows that is 28 behind master and 5 ahead. But that belongs to another issue.

Should I open a new issue (and request) to add the fix? From which branch should I do it?

Thanks!

EDIT: forgot a ‘that’ before ‘belongs’.

[filippodaminato]

HI! I had the same problem today. I solved it as follows:

image_thumbnail.html

{% load crispy_forms_field %}
<!-- PREVIEW IMAGE -->
<div class="fileupload fileupload-new" data-provides="fileupload">
    <div class="row">
        <div class="col-md-12">
            <img id="output" class="img-thumbnail img-fluid w-100" {% if field.value %} src="{{ field.value.url }}"  {% endif %} />
            {% if field.value %}
                <input type="checkbox" name="{{ field.name }}-clear" id="{{ field.name }}-clear_id">
                <label for="{{field.name}}-clear_id">Clear</label><br>
            {% endif %}
        </div>
    </div>
</div>
<!-- INPUT -->
<div class="input-group mb-3">
    <div class="custom-file">
      <input type="file" name="{{field.name}}" accept="image/*" class="custom-file-input" id="inputGroupFile01" onchange="loadFile(event)" aria-describedby="inputGroupFileAddon01">
      <label class="custom-file-label" id="inputFileLabel">Presentation Image</label>
    </div>
</div>
{% include 'bootstrap4/layout/help_text_and_errors.html' %}

<script>
    // preview image
    var loadFile = function(event) {
      var output = document.getElementById('output');
      output.src = URL.createObjectURL(event.target.files[0]);
      output.onload = function() {
        URL.revokeObjectURL(output.src)
      }   
      document.getElementById("inputFileLabel").innerHTML = "{{field.label_tag}" + event.target.files[0].name;
    };
</script>

forms.py

from crispy_forms.layout import Field

class CustomImageField(Field):
    template = 'layout/fields/image_thumbnail.html'

forms.py

from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Submit, Row, Column

class CreateProductForm(forms.ModelForm):

    class Meta:
        model = Product
        fields = ( ...., 'img_presentation', .... )

    def __init__(self, *args, **kwargs):
        super(CreateProductForm, self).__init__(*args, **kwargs)
        self.helper = FormHelper()
        
        self.helper.layout = Layout(
           ....
            Row(
                Column(CustomImageField('img_presentation'), css_class='form-group col-md-12 '),
                css_class='form-row'
            ),
           ....
           Submit('submit', 'Crea',css_class='btn btn-block btn-success')
        )

Resutl 🎉

I hope that can be helpful to those in a similar situation