How do I show a form and 2 inputs to upload multiple images in the template and in the view?

Question

I want to make an input that uploads multiple images. I have been reviewing some tutorials and my experience makes me not understand many things. I placed a view but in the template, where the input should appear, this appears:

<QuerySet []>

Obviously that should not be there, the input should appear that uploads the images when clicked. Can you see my code? can you give me a hint?

html

                                <form enctype="multipart/form-data" method="post">
                                           {% csrf_token %}
                                             
                                               <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>

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

                                           <div class="tab-pane" id="pictures" role="tabpanel">
                                               <div>
                                                       {{ images }}
                                                   <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>
                                           <div class="tab-pane" id="warranty" role="tabpanel">
                                               <div>
                                                       {{ garantias }}
                                                   <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

def create_carros(request):
   if request.method == "POST":
       form = CarroForm(request.POST)
       images = request.FILES.getlist('fotosCarro')
       garantias = request.FILES.getlist('garantia')
       for image in images:
           Carro.objects.create(fotosCarro=image)
       for garantia in garantias:
           Carro.objects.create(garantias=garantia)

   form = CarroForm(request.POST)
   images = FotosCarro.objects.all()
   garantias = Garantia.objects.all()
   return render(request, 'carros/carros-form-add.html', {'images': images,'garantias': garantias,'form':form})

models.py

class Carro(models.Model):
   compañia_seguros=models.CharField(max_length=255, null=True)
   cliente= models.ForeignKey(Clientes, on_delete=models.SET_NULL, null=True)
   fecha_registros = models.DateTimeField(default=datetime.now, null=True)

   def __str__(self):
       return f'{self.compañia_seguros}{self.cliente}' \
              f'{self.fecha_registros}'



class FotosCarro(models.Model):
   carro = models.ForeignKey(Clientes, on_delete=models.SET_NULL, null=True)
   fotosCarro=models.ImageField(null=True, upload_to="images/")

class Garantia(models.Model):
   carro = models.ForeignKey(Clientes, on_delete=models.SET_NULL, null=True)
   garantia=models.ImageField(null=True, upload_to="images/")

forms.py

class CarroForm(forms.ModelForm):
    class Meta:
        model=Carro
        fields = ['compañia_seguros','cliente']
               
        exclude = ['fecha_registros']
widgets = {
            
            'compañia_seguros': forms.TextInput(
                attrs={

                    'class': 'form-control'
                }
            ),
            'cliente': forms.Select(
                attrs={
                    'class': 'form-select'
                }
            ),
            
            'fecha_registros': forms.DateInput(
                attrs={
                    'class': 'form-control',
                }
            ),

        }



class FotosForm(forms.ModelForm):
    model = FotosCarro
    widgets = {

        'fotosCarro':forms.FileInput(
            attrs={
                'class': 'type-file',
                'multiple': True,
                'id': 'file-input',
                'onchange':'preview()',
            }
        ),

    }


class GarantiaForm(forms.ModelForm):
    model = Garantia
    widgets = {
        'garantia':forms.FileInput(
                attrs={
                    'class': 'type-file',
                    'multiple': True,
                    'id': 'file-inputz',
                    'onchange': 'previewz()',
         
                }
            ),
    }

Answer 1

Now that you have separated out FotosCarro and Garantia as their own models, I assume that Carro can have more than one of each of these. This means your form needs to be a bit more complex. To include "subforms" for related models in the parent form, you can to use inline formsets. This will allow you to upload images for multiple FotosCarros and Grantias for a single Carro.