Spaces:
Sleeping
Sleeping
File size: 1,949 Bytes
1e932e0 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
{% load widget_tweaks %}
{% if form.non_field_errors %}
<div class="alert alert-danger" role="alert">
{% for error in form.non_field_errors %}
<p {% if forloop.last %}{% endif %} class="mb-0">{{ error }}</p>
{% endfor %}
</div>
{% endif %}
{% for field in form %}
<div class="form-group ">
{{ field.label_tag }}
{% if form.is_bound %}
{% if field.errors %}
{% render_field field class="form-control is-invalid" %}
{% for error in field.errors %}
<div class="invalid-feedback">{{ error }}</div>
{% endfor %}
{% else %}
{% if field.name == 'pic' %}
<div>
<input type="file" class="form-control-file" name="{{ field.name }}" id="{{ field.id_for_label }}" onchange="previewImage(this)">
</div>
<div class="mt-3">
<img id="imagePreview" src="#" alt="Image Preview" style="max-width: 100%; max-height: 200px; display: none;">
</div>
{% else %}
{% render_field field class="form-control is-invalid" %}
{% endif %}
{% endif %}
{% else %}
{% if field.name == 'pic' %}
<div>
<input type="file" class="form-control-file" name="{{ field.name }}" id="{{ field.id_for_label }}" onchange="previewImage(this)">
</div>
<div class="mt-3">
<img id="imagePreview" src="#" alt="Image Preview" style="max-width: 100%; max-height: 100%; display: none;">
</div>
{% else %}
{% render_field field class="form-control" %}
{% endif %}
{% endif %}
</div>
{% if field.help_text %}
<small class="form-text text-muted">
{{ field.help_text }}
</small>
{% endif %}
{% endfor %}
<script>
// Function to preview the image
function previewImage(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#imagePreview').attr('src', e.target.result);
$('#imagePreview').show();
}
reader.readAsDataURL(input.files[0]);
}
}
</script>
|