y/template/includes/form.html

{% 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>