html Django ImageField Jasny Bootstrap

Posted 2021-05-11

from crispy_forms.layout import Field

class MyForm(forms.ModelForm):
  
    def __init__(self, *args, **kwargs):
        self.helper = FormHelper()
        self.helper.layout = Layout(
          # ...
          Field(
              'avatar',
              template='crispy/_photo_upload_field.html',
          ),
        )

{% extends "layout/base.html" %}
{% load crispy_forms_tags static %}

{% block css %}
    <link href="{% static 'bower_components/jasny-bootstrap/dist/css/jasny-bootstrap.css' %}" rel="stylesheet">
{% endblock %}

{% block content %}>
    {% crispy form %}
{% endblock %}

{% block js %}
    <script src="{% static 'bower_components/jasny-bootstrap/dist/js/jasny-bootstrap.min.js' %}"></script>
{% endblock %}

{% load crispy_forms_field static %}
<div>
    <div id="div_id_{{ field.name }}" class="form-group">

        <div class="controls {{ field_class }} js-fileinput-wrapper" data-fileinput="input_{{ field.name }}_clear" data-name="{{ field.name }}">

            <div class="fileinput {% if field.value %}fileinput-exists{% else %}fileinput-new{% endif %}" data-provides="fileinput">
                <div class="fileinput-preview img-circle" data-trigger="fileinput">
                {% if field.value %}
                    <img style="width: 200px;" src="{{ field.value.url }}">
                {% else %}
                    <img style="width: 200px;" src="{% static 'img/profile.png' %}">
                {% endif %}
                </div>
                <div>
                    <span class="btn btn-red">
                        <span class="fileinput-new">Seleccione una imagen</span>
                        <span class="fileinput-exists">Cambiar imagen</span>
                        <input type="file" name="{{ field.name }}"></span>
                </div>
            </div>
            <span style="display: none;">
                <input id="input_{{ field.name }}_clear" name="{{ field.name }}-clear" value="" />
            </span>
            {% if field.value and field.value.url %}
            <input id="{{ field.name }}-clear_id" name="{{ field.name }}-clear" type="checkbox" />
            <label for="{{ field.name }}-clear_id">Borrar imagen</label>
            {% endif %}

            {% include 'bootstrap3/layout/help_text_and_errors.html' %}
        </div>
    </div>
</div>