Доступ к отображаемым вручную полям формы из Jquery

Question

Когда я нормально отрисовываю форму, мой код проверит файл изображения и отправит его через. Если я вручную отображаю поля формы, валидация падает.

Нормальная форма :

{{ form }}

Отображаемые вручную поля :

<div class="form-row">
    {{ form.username }}
</div>
<div class="form-row">
    {{ form.image }}
</div>

Jquery обработка изображения :

      $("#id_image").change(function () {
        if (this.files && this.files[0]) {
            console.log(this.files[0]);
          var reader = new FileReader();
          reader.onload = function (e) {
            $("#image").attr("src", e.target.result);
            $("#modalCrop").modal("show");
          }
          reader.readAsDataURL(this.files[0]);
        }
      });

Я попытался изменить this.files[0] на this.files[6], поскольку изображение является седьмым элементом в форме, но это не сработало. Помощь

Answer 1

Попробуйте получить файлы из экземпляра события

$("#id_image").change(function (e) {
    let files = e.target.files
    ...
});