Django UpdateView подгрузить старые изображения в форму и вывести на страницу, новые фото отображаю через js

Подскажите пожалуйста как подгрузить старые изображения в форму и вывести на страницу

Views

    model = Card
    form_class = CardProductUpdateForm
    template_name = 'ads/card_product_update.html'

    def form_valid(self, form):
        self.object = form.save(commit=False)
        card_slug = str(self.object.slug) + str(randint(1, 1000000))
        self.object.slug = slugify(card_slug)
        self.object.id_user = self.request.user
        self.object.save()
        for key in form.files:
            img_files = form.files.getlist(key)
            if img_files:
                for file in img_files:
                    CardPhoto.objects.create(card_img=file, id_card=self.object)
            else:
                raise ValidationError("Загрузите минимум 1 фото")

        return super().form_valid(form)

Form

    photos = forms.ImageField(label=u'Фотографии', widget=forms.FileInput(attrs={'multiple': 'multiple'}),
                              validators=[max_file_size])

    class Meta:
        model = Card
        fields = ('title', 'price', 'condition', 'description', 'photos')

Model

    CHOICES_CONDITION = (
        ('Новое', 'Новое'),
        ('Б\у', 'Б\у')
    )

    title = models.CharField(max_length=25, verbose_name='Название')
    slug = models.SlugField(unique=True, db_index=True, verbose_name='URL')
    price = models.IntegerField(verbose_name='Цена')
    id_category = models.ForeignKey(
        Category,
        on_delete=models.CASCADE,
        related_name='category_card',
        verbose_name='Категория',
        default=None
    )
    id_user = models.ForeignKey(
        User,
        on_delete=models.CASCADE,
        related_name='user_card',
        verbose_name='Пользователь',
        default=None
    )
    condition = models.CharField(max_length=50, verbose_name='Состояние',
                                 choices=CHOICES_CONDITION, default=CHOICES_CONDITION[0][0])
    description = models.TextField(blank=True, verbose_name='Описание')
    date_add = models.DateTimeField(auto_now_add=True, verbose_name='Дата добавления')
    is_deleted = models.BooleanField(default=False, verbose_name='Удалить')

    def get_absolute_url(self):
        return reverse('card', kwargs={'category': self.id_category.slug, 'slug': self.slug})

    class Meta:
        unique_together = [['id_user', 'slug']]
        verbose_name = 'Объявление'
        verbose_name_plural = 'Объявления'
        ordering = ['-date_add']

    def __str__(self):
        return self.slug


class CardPhoto(models.Model):
    card_img = models.ImageField(upload_to=upload_images,
                                 verbose_name='Фотографии', blank=True, null=True, validators=[max_file_size])
    id_card = models.ForeignKey('Card', on_delete=models.CASCADE, related_name='photos')

    class Meta:
        verbose_name = 'Фотографии'
        verbose_name_plural = 'Фотографии'

    def __str__(self):
        return f"{self.id_card.slug}"

html

    <div class="content100-form">
        <span class="login100-form-title p-b-35 p-t-35">
            Редактирование
        </span>

        <form action="{{ objects.get_absolute_url }}" enctype="multipart/form-data" method="post">
            {% csrf_token %}

            {% if form.errors %}
                {% for field in form %}
                    {% for error in field.errors %}
                        <div class="alert alert-error">
                            {{ error|escape }}
                        </div>
                    {% endfor %}
                {% endfor %}
                {% for error in form.non_field_errors %}
                    <div class="alert alert-error">
                        {{ error|escape }}
                    </div>
                {% endfor %}
            {% endif %}
            <div class="wrap-input100 m-b-23">
                <span class="label-input100" style="font-size: 16px">Название <span class="asteriskField">*</span></span>
                {% render_field form.title class="input100" placeholder="Введите название" %}
                <span class="focus-input100" data-symbol="&#xf206;"></span>
            </div>
            <div class="wrap-input100 m-b-23">
                <span class="label-input100" style="font-size: 16px">Цена <span class="asteriskField">*</span></span>
                {% render_field form.price class="input100" placeholder="Введите цену" %}
                <span class="focus-input100" data-symbol="&#xf206;"></span>
            </div>
            <div class="wrap-input100 m-b-23">
                <div class="label-input100 m-b-23" style="font-size: 16px">Состояние <span class="asteriskField">*</span></div>
                {% render_field form.condition class="input100" %}
            </div>
            {{ form.description|as_crispy_field }}

            <div class="m-b-23 m-t-23">
                <div class="m-b-10" style="font-size: 16px">Фотографии (не более 6 фото) <span class="asteriskField">* </span></div>
                <div class="files_style m-b-10">
                {% render_field form.photos id="fln" name="files[]" %}
                </div>
                <div id="list"></div>
            </div>


            <div class="container-login100-form-btn">
                <div class="wrap-login100-form-btn">
                    <div class="login100-form-bgbtn"></div>
                    <button type="submit" class="login100-form-btn" name="btnformlogin">
                        Обновить
                    </button>
                </div>
            </div>
        </form>
    </div>

JS

var showFile = (function () {
    var fr = new FileReader,
        i = 0,
        files, file;

    fr.onload = function (e) {
        var li;


        if (file.type.match('image.*') && document.getElementById("fln").files.length < 7) {
            li = document.createElement('li');
            if (file.size > (5 * 1024 * 1024)) {
                li.innerHTML = "<div class='del-photos'><div style='width: 100px; height: 100px; class='card'><div class='alert-error card'>Размер фото превышает 5 мб</div></div><div class='del-photo-btn'><button class='delb' type='button'><i class='fa fa-trash-o'></i>Удалить</button></div></div>";
            } else {
                li.innerHTML = "<div class='del-photos'><img class='card' src='" + e.target.result + "' style='width: 100px; height: 100px;'><div class='del-photo-btn'><button class='delb' type='button'><i class='fa fa-trash-o'></i>Удалить</button></div></div>";
            }
            document.getElementById('list').appendChild(li);
        }
            file = files[++i];
            if (file) {
                fr.readAsDataURL(file)
            } else {
                i = 0;
            }
    }

    return function (e) {
        files = e.target.files;
        file = files[i];
        if (files) {
            while (i < files.length && !file.type.match('image.*')) {
                file = files[++i];
            }
            if (file) fr.readAsDataURL(files[i])
        }
    }
 
})()


$( document ).on('click', '.del-photo-btn', function() {
    $(this).parent().parent().remove();
    return false;
})

if (document.getElementById('fln')) {
    document.getElementById('fln').addEventListener('change', showFile, false);
}

Вернуться на верх