ModelForm not rendering in the template

Using Django Forms & APIs
1

Hey guys, my form, which only contains an input file, is not rendering. Here’s the code:

forms.py

class BoletimForm(forms.ModelForm):
    class Meta:
        model = Boletim
        fields = ['arquivo']

views.py

def adicionar_boletim(request):
    form = BoletimForm()
    boletim_salvo_pdf = None
    if request.method == 'POST':
        form = BoletimForm(request.POST, request.FILES)
        if form.is_valid():
            boletim = form.save()
            boletim_salvo_pdf = boletim.file.url
    return render(request, 'previsao-tempo.html',{'form':form,'boletim_salvo_pdf':boletim_salvo_pdf})

urls.py

    #Previsao
    path('upload/',views.adicionar_boletim,name='adicionar_boletim')

models.py

class Boletim(models.Model):
    file = models.FileField(upload_to='boletim/', blank=True, null=True)
    uploaded_at = models.DateTimeField(auto_now=True)

html

{% extends 'base.html' %}
{% load crispy_forms_tags %}
{% load static %}
{% block content %}
<style>
    #boletim{
        height: 80vh;
    width: 50%;
    border: 0;
    position: relative;    
    margin-bottom: 2em;
    }
    @media (max-width: 992px) {
        #boletim{
            width: 100%;
        }
    }
</style>
<head>
    <title>{% block title %}Previsão do Tempo{% endblock %}</title>
</head>
<div class="d-flex justify-content-center align-items-center flex-column container mb-3">
    <div class="d-flex  mt-3 mb-3 align-items-center w-100">
        <hr style="border: 2px solid  #E66222; width: 100%;">
        <h4 style="background-color: #E66222; color:#ffff; text-wrap: nowrap; padding: 0.3em 0.15em;">PREVISÃO DO TEMPO</h4>
        <hr style="border: 2px solid  #E66222; width: 100%;">
    </div>
    <form method="POST" enctype="multipart/form-data" action="">
        {% csrf_token %}
        {{form.as_p}}
        <button type="submit">Enviar</button>
    </form>
    {%if boletim_salvo_pdf %}
        <iframe id="boletim" src="{{boletim_salvo_pdf}}" allowfullscreen></iframe>

    {%endif%}
    <h3>Boletim Meteorológico</h3>
    
    <div class="texto">
        <h3>TERMOS DA PREVISÃO

        </h3>
        <h4>Céu/ Cobertura de Nuvens:</h4>

<p><b>Névoa</b> - Conjunto de microscópicas gotas de água suspensas na atmosfera. Provoca uma redução da visibilidade sendo que esta é superior a 1 Km.</p>

<p><b>Nevoeiro</b> - Massa de minúsculas, porém visíveis, gotas de água suspensas na atmosfera, próximas ou junto à superfície da Terra, que reduzem a visibilidade horizontal para menos de 1 Km.</p>

<p><b>Céu Claro</b> - Estado do céu quando nenhuma nuvem ou obscurecimento são vistos ou detectados do ponto de observação.</p>

<p><b>Céu Parcialmente Nublado</b> - Nebulosidade notavelmente presente, mas o céu não está completamente coberto em nenhum momento do dia.</p>

<p><b>Céu Nublado</b> - Nebulosidade encobrindo o céu em sua maior parte.</p>

<p><b>Céu Encoberto</b> - Nebulosidade encobrindo o céu em sua totalidade.</p>

<h4>Chuva:</h4>

<p><b>Chuva Fraca</b> - Precipitação cuja intensidade é menor do que 5,0 mm/h.</p>

<p><b>Chuva Moderada</b> - Precipitação cuja intensidade está compreendida entre 5,0 e 25 mm/h.</p>

<p><b>Chuva Forte</b> - Precipitação cuja intensidade está compreendida entre 25,1 e 50 mm/h.</p>

<p><b>Chuva muito forte</b> - Precipitação cuja intensidade é maior do que 50,0 mm/h.</p>

<p><b>Pancadas de Chuva</b> - Precipitação intensa ocorrida em curto período de tempo e espacialmente restrita.</p>

<h4>Vento e Direção:</h4>

<p>A direção do vento sempre se refere a direção de onde o vento sopra, ou seja, vento de norte quer dizer que o escoamento é de norte para sul. Em algumas situações, a previsão de direção do vento pode utilizar combinações das direções abaixo (Ex: N/NE, SE/S).</p>

<ul>
    <li><b>N</b> - Vento de direção Norte;</li>
    <li><b>NE</b> - Vento de direção Nordeste;</li>
    <li><b>E</b> - Vento de direção Leste;</li>
    <li><b>SE</b> - Vento de direção Sudeste;</li>
    <li><b>S</b> - Vento de direção Sul;</li>
    <li><b>SW</b> - Vento de direção Sudoeste;</li>
    <li><b>W</b> - Vento de direção Oeste;</li>
    <li><b>NW</b> - Vento de direção Noroeste;</li>
</ul>

<h4>Vento – Intensidade:</h4>

<p><b>Fraco</b> - Intensidade menor do que 10 kt (18,5 km/h);</p>

<p><b>Moderado</b> - Intensidade entre 10 kt (18,5 km/h) e 28 kt (51 km/h);</p>

<p><b>Forte</b> - Intensidade entre 28 kt (51 km/h) e 41 kt (76 km/h);</p>

<p><b>Muito Forte</b> - Intensidade maior do que 41 kt (76 km/h);</p>

<p><i>Kt</i> = nós.</p>

<h4>Temperatura:</h4>

<p><b>Estável</b> - Temperatura máxima variando até 2ºC em relação ao dia anterior.</p>

<p><b>Declínio</b> - Temperatura máxima diminuindo mais de 2ºC em relação ao dia anterior.</p>

<p><b>Elevação</b> - Temperatura máxima aumentando mais de 2ºC em relação ao dia anterior.</p>
    </div>
</div>
{%endblock%}

here’s the image. It only renders the submit button
Imgur

[Album] imgur.com
2

Please post the complete template.

3

Done and i also translated my code so its better to understand the code flow

4

Thank you for doing that, but that actually makes it more difficult for me to match your screen image to the code to match the code to what is being rendered.

One of the things I’d suggest is that you look at the rendered html in the browser to see whether you’re seeing the form being rendered in it.

Then, the next steps would be to examine your project to ensure you don’t have something duplicated that is confusing the situation - make sure you don’t have two copies of any of the form, view, or template.

5

i wanna solve this so bad that i changed it back to the original code. Now it matches the image.
Sorry for the confusion

6

Cool - that all looks good.

Next step is to check your project for duplicate definitions. Make sure you don’t have two different views, forms, models, or urls defined with the same name, and that you don’t have two files in two separate directories with the name “previsao-tempo.html”.

7

just checked it here and any file or definitions duplicated.

8

Then the next thing to check is the structure of your html. It would help if you posted the parent template (base.html)

If the html is malformed, it’s quite possible that the browser is dropping elements.

One of the problems is that you’ve got a <head> element inside the <body>.
You also have a <style> element that is not inside the <head> element.

As a quick test, I’d remove both the <style> and <head> elements from your template to see if that changes anything.

You can also check the html that has been rendered is correct by looking at the network tab in your browser’s developer tools for the request. You would be able to see the text of the html as the server is providing it.

9

You should install django-fastdev to get crashes in your templates when the template is broken.