Django ImageField Jasny Bootstrap
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>