How do i display a ModelForm into HTMLtemplate?

Question

I have a template in which i display a Form for users to upload images. In the same template i want the images uploaded from users to be shown so i can make a gallery from users uploads.

The problem is that the Form is being displayed without any problem but i am struggling to display the photos uploaded. (They are uploaded to the Data Base withouh any error too.)

My models.py looks like this

class categoria(models.Model):
    nombre = models.CharField(verbose_name = "nombre categoria", max_length = 20)
    def __str__(self):
        return self.nombre

class imagen(models.Model):
    titulo = models.CharField(verbose_name = "el titulo de la imagen", max_length = 20)
    imagen = models.ImageField(verbose_name = "imagen que se suba", upload_to = "galeria")
    descripcion = models.CharField(verbose_name = "descripcion de la imagen", max_length=60, null = 
    True, blank = True)
    creada = models.DateTimeField(auto_now_add=True)
    categorias = models.ManyToManyField(categoria)
    def __str__(self):
        return "El titulo es: {}, la imagen: {}, la descripcion: {}, ha sido creada en: {}, y 
        pertenece a las categorias: {}".format(self.titulo, self.imagen,
        self.descripcion, self.creada, self.categorias)

class formulario_img(ModelForm):
    class Meta:
        model = imagen
        fields = ['titulo', 'imagen', 'descripcion', 'categorias']

The views.py looks like this

from .models import formulario_img, imagenfrom
def imagenes_galeria(request): 
    imagenes = formulario_img.objects.all()
    return render(request, "galeria/galeria.html", {"imagenes":imagenes})


def galeria(request):
    if request.method == "POST":
        formulario_subir_foto = formulario_img(request.POST, request.FILES)
        if formulario_subir_foto.is_valid():
            formulario_subir_foto.save()
            return redirect("/galeria")
    else:
        formulario_subir_foto = formulario_img()

    return render(request, "galeria/galeria.html", 
    {"formulario_subir_foto":formulario_subir_foto})

Here i've tried using both formulario_img.objects.all() as well as imagen.objects.all() and none is working.

The template looks like this. As i wrote above, the Form to upload images is shown and works perfectly.

{% extends "WebCalistenia/padre.html" %}
{% block content %}
    <section class="prueba">
        <table>
            <form action="" method="POST" enctype='multipart/form-data'>
                {% csrf_token %}
                {{formulario_subir_foto.as_table}}
                <input type="submit" value="Enviar">
            </form>
        </table>
    </section>
    {% for i in imagenes %}
        <section class="prueba">
            <p>{{i.titulo}}</p>
            <p>{{i.descripcion}}</p>
            <p>{{i.categorias}}</p> 
        </section>
    {% endfor %}
{% endblock %}
    

Answer 1

You are not passing imagenes to the context in your view galeria. You have two different views rendering the same template but each are passing different things to the context. This does not make sense as the template is expecting both variables in the context. Have only one view and pass both variables in the context:

def galeria(request):
    if request.method == "POST":
        formulario_subir_foto = formulario_img(request.POST, request.FILES)
        if formulario_subir_foto.is_valid():
            formulario_subir_foto.save()
            return redirect("/galeria")
    else:
        formulario_subir_foto = formulario_img()
    
    imagenes = formulario_img.objects.all()
    return render(request, "galeria/galeria.html", 
    {"formulario_subir_foto": formulario_subir_foto, "imagenes": imagenes})

Note: Remove any url pattern you might have added to the other view.