How to display image in modelformset_factory in Django

144 Views Asked by At

I have following model where Im using image field:

from django.db import models

class ActiveManager(models.Manager):
    def active(self):
        return self.filter(active=True)

class Offer(models.Model):
    name = models.CharField(max_length=255)
    url = models.URLField(blank=True)
    image = models.ImageField(verbose_name='Banner Image', upload_to='offers', blank=True)
    active = models.BooleanField(default=True)
    created = models.DateTimeField(auto_now_add=True)
    updated = models.DateTimeField(auto_now=True)

    objects = ActiveManager()

    def __str__(self):
        return self.name

    def get_url(self):
        return self.url

    def get_image(self):
        return self.image.url

    def is_active(self):
        return self.active

I want to edit multiple forms on the go so I userd modelformset_factory: Here is the view:

from django.shortcuts import render, redirect
from django.forms import modelformset_factory
from .models import Offer

# Create your views here.
def offers(request):
    OfferFormSet = modelformset_factory(Offer, fields=(
        'name', 'url', 'image', 'active'
    ))
    formset = OfferFormSet()
    if request.method == 'POST':
        formset = OfferFormSet(request.POST, request.FILES)
        if formset.is_valid():
            formset = formset.save(commit=False)
            for form in formset:
                form.save()
                return redirect('offer:offers')
    context = {'formset': formset}
    return render(request, 'offers.html', context)

Now in the html Im trying to display the image of already existing instance but I couldn't figure out how to do so, Here is an HTML

{% extends 'base.html' %}

{% block content %}
<style>
    .form-div{
        display: flex;
        flex-grow: 1;
        margin: 10px 20px;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.1);
    }
</style>

<form method="post" enctype="multipart/form-data">
    {% csrf_token %}
    {{ formset.management_form }}
    {% for form in formset %}
        <div class="form-div">
            <div class="form-group">
                <label for="name">{{ form.name.label_tag}}</label>
                {{ form.name }}
            </div>
            <div class="form-group">
                <label for="name">{{ form.url.label_tag }}</label>
                {{ form.url }}
            </div>
            <div class="form-group">
                
                <img src="{{ form.image }}" alt="">
            </div>
            <input type="submit" value="Create">
        </div>
    {% endfor %}
</form>
{% endblock content %}

Please help me out. Thank you so much

0

There are 0 best solutions below