When I upload and save multiple files nothing happens

Question

I have a doubt, it is that reviewing the documentation to upload multiple files, I see that the site explain it easily, only that it is not working for me.

In the same template I have a form that accepts text and also there are two inputs that each must accept multiple images

So I don't understand when I click the save button, none of my images are saved but the other data is saved

models.py

class Carro(models.Model):
    no_politica=models.CharField(max_length=255, null=True)
    cliente= models.ForeignKey(Clientes, on_delete=models.SET_NULL, null=True)
    fotosCarro=models.ImageField(null=True, upload_to="images/")
    garantia=models.ImageField(null=True, upload_to="images/")
    fecha_registros = models.DateTimeField(default=datetime.now, null=True)

    def __str__(self):
        return f'{self.no_politica}{self.cliente}' \
               f'{self.fecha_registros}{self.fotosCarro}{self.garantia}'

carros-form-add.html

                                        <form enctype="multipart/form-data" method="post">
                                                {% csrf_token %}
                                               <div class="row mb-3">
                                                <div class="col-md-4">
                                                    <div class="mb-3">
                                                        <label>License plate</label>
                                                        <br>
                                                        <div>
                                                          {{ form.placas }}
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="mb-3">
                                                        <label>Type</label>
                                                        {{ form.tipo }}
                                                    </div>
                                                </div>
                                                <div class="col-md-4 only-person">
                                                    <div class="mb-3">
                                                        <label>Make</label>
                                                        {{ form.marca }}
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row mb-3">
                                                <div class="col-md-4 only-person">
                                                    <div class="mb-3">
                                                        <label>Model</label>
                                                        {{ form.modelo }}
                                                        <div class="invalid-feedback">
                                                            Please provide the first name.
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-4 only-person">
                                                    <div class="mb-3">
                                                        <label class="form-label">Year</label>
                                                        {{ form.año }}
                                                        <div class="invalid-feedback">
                                                            Please provide the last name.
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="mb-3">
                                                        <label class="form-label">VIN</label>
                                                        {{ form.vin }}
                                                        <div class="invalid-feedback">
                                                            Please provide a phone number.
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row mb-3">

                                                <div class="col-md-4">
                                                    <div class="mb-3">
                                                        <label class="form-label">Color</label>
                                                        {{ form.color }}
                                                        <div class="invalid-feedback">
                                                            Please provide a fax number.
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="mb-3">
                                                        <label class="form-label">Engine</label>
                                                        {{ form.motor }}
                                                        <div class="invalid-feedback">
                                                            Please provide a fax number.
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row mb-3">
                                                <div class="col-md-4">
                                                    <div class="mb-3">
                                                        <label class="form-label">Insurance agent</label>
                                                        {{ form.agente_seguros }}
                                                        <div class="invalid-feedback">
                                                            Please provide an e-mail.
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="mb-3">
                                                        <label class="form-label">Insurance company</label>
                                                        {{ form.compañia_seguros }}
                                                        <div class="invalid-feedback">
                                                            Please provide a website.
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="mb-3">
                                                        <label>Policy No.</label>
                                                        {{ form.no_politica }}
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row mb-3">
                                                <div class="col-md-4">
                                                    <div class="mb-3">
                                                        <label>Cliente</label>
                                                        {{ form.cliente }}
                                                    </div>
                                                </div>
                                            </div>

                                            </div>

                                            <!-- GALLERY CONTENT -->

                                            <div class="tab-pane" id="pictures" role="tabpanel">
                                                <div>
                                                    <input type="file" multiple name="fotosCarro">
                                                    <label for="file-input" class="btn btn-outline-success">Upload images</label>
                                                        <p id="num-of-files">No files chosen</p>
                                                        <div id="images"></div>

                                                </div>

                                            </div>

                                            <!-- Warranty CONTENT -->
                                            <div class="tab-pane" id="warranty" role="tabpanel">
                                                <div>
                                                    <input type="file" multiple name="garantia">
                                                    <label for="file-inputz" class="btn btn-outline-success">Upload images</label>
                                                        <p id="num-of-filez">No files chosen</p>
                                                        <div id="imagez"></div>

                                                </div>

                                                <br>
                                                <button class="btn btn-primary mb-3" type="submit" value="Post">Save</button>
                                            </div>

                                        </form>

views.py

class create_carros(FormView):

    form_class=CarroForm
    template_name='carros/carros-form-add.html'
    success_url=reverse_lazy('carros:list_cars')

    def post(self, request, *args, **kwargs):
        form_class = self.get_form_class()
        form = self.get_form(form_class)
        files = request.FILES.getlist('fotosCarro')
        garantia = request.FILES.getlist('garantia')
        if form.is_valid():
            for f in files:
                fotos = CarroImagenes.objects.create(fotosCarro=f)
                fotos.save()
            for g in garantia:
                garantias = GarantiaImagenes.objects.create(garantia=g)
                garantias.save()
            form.save()
            return render(request, 'carros/index.html', {'form':form})

        else:
            return render(request,'carros:list_cars',{'form':form})

Answer 1

In order to save images via a form, you need to specify the enctype="multipart/form-data" parameter like this:

<form action="" method="POST" enctype="multipart/form-data">

{{ your_form_contents }}

</form>

https://docs.djangoproject.com/en/4.0/topics/http/file-uploads/