Загрузка нескольких изображений с помощью django formset и ajax-запроса

Я пытаюсь загрузить несколько изображений с помощью django formset и через ajax запрос. Я знаю, что я должен использовать formData.append("name",document.getElementById("img_1_id").files[0]);, но я не знаю, как сделать это для нескольких полей изображений? Есть ли что-то, чтобы исправить это, пожалуйста? Я не хочу использовать несколько входных файлов статически, я хочу реализовать это динамически, поэтому я использовал модель фабрики формсета, 

class Document(models.Model):
    booking =models.ForeignKey(Booking,on_delete=models.PROTECT)
    docs = models.ImageField(upload_to=upload_docs)

    def __str__(self):
        return str(self.booking.id)

и вот мой forms.py

class UploadDocumentsForm(forms.ModelForm):
    class Meta:
        model = Document
        fields = ['docs']
UploadDocumentFormSet = modelformset_factory(Document,form=UploadDocumentsForm,extra=1,can_delete=True)

и вот мой views.py

@login_required
def add_new_image(request,id):
    obj = get_object_or_404(Booking,id=id)
    if request.is_ajax() and request.method == 'POST':
        images = UploadDocumentFormSet(request.POST,request.FILES)
        if images.is_valid():            
            for img in images:
                if img.is_valid() and img.cleaned_data !={}:
                    img_post = img.save(commit=False)
                    img_post.booking = obj
                    img_post.save()
            return redirect(reverse_lazy("booking:add_booking",kwargs={"room_no":obj.room_no.room_no}))
        else:
            messages.error(request,_('choose right image ..'))

    images = UploadDocumentFormSet(queryset=Document.objects.none())
        
    return render(request,'booking/add_img.html',{'obj':obj,'images':images})

и вот мои шаблоны

$('#addButton').click(function() {
    var form_dex1 = $('#id_form-TOTAL_FORMS').val();
        $('#images').append($('#formset').html().replace(/__prefix__/g,form_dex1));
        $('#id_form-TOTAL_FORMS').val(parseInt(form_dex1) + 1);    
        
    });  
          <button id="addButton" class="px-4 py-1 pb-2 text-white focus:outline-none header rounded-xl">
            {% trans "add new image" %}
        </button>  
    <div class="flex flex-wrap justify-between ">

        <div  class="text-lg w-full border p-3 border-purple-900 rounded-lg">
            <form action="" method="POST" enctype="multipart/form-data" dir="ltr">{% csrf_token %}
                {% for form in images.forms %}
                {{form.id}}          
                {{images.management_form}}
                <div class="form-group mt-3" id="images">
                    {{ form.docs | add_class:'form-control-file' }}
                </div>
               
                {% endfor %}
                <div class="form-group mt-3" id="formset" style="display: none;">
                    {{ images.empty_form.docs | add_class:'form-control-file' }}
            
                </div>
            
                <button class="header pt-2  text-white px-4 p-1 rounded-lg mt-4">{% trans "save" %}</button>
            </form>

есть ли способ достичь этого, пожалуйста? Я благодарен за вашу помощь. заранее спасибо

Вернуться на верх