HTML-форма, отправляющая дубликаты файлов на сервер django

html форма отображает все правильно, но когда я отправляю ее в часть Django, сервер получает (например, если я отправляю 4 картинки, первые 3 картинки просто дубликаты первой картинки, а последняя картинка в порядке) дубликаты первой картинки и последней картинки.

    window.pageCount = 1;
    function addPage(el) {
        pageCount += 1;
        console.log(pageCount);
        window.el = el;
        window.div1 = el.parentElement.parentElement.parentElement.cloneNode(true);
        div1.id = 'p' + pageCount;
        console.log(div1.id);

        var children = div1.children;
        for (var i = 0; i < children.length; i++) {
            console.log(children[i]);
            if (children[i].tagName == 'DIV' && children[i].className.includes( 'img-thumbnail')) {
                children[i].children[1].src = '../media/add.png';


                //.replace(/[^0-9]/g, "");


            }
         
            
        }
        var subChildren = children[0];
        subChildren.children[0].value = '';
        subChildren.children[1].children[2].style.background = 'grey';
        subChildren.children[1].children[3].value = '';
        children[1].children[0].id += 1;

        document.getElementById('form').appendChild(div1);
    }
    window.image = null;
    function test(el) {
        var file = el.files[0];
        console.log(file);
        var reader = new FileReader();
        reader.onload = function (e) {
            // var image = el.nextElementSibling;
            image.src = e.target.result;
            console.log(image.id);
            //document.body.appendChild(image);
            // console.log('hello');
        }
        reader.readAsDataURL(file);
    }
    function ChooseFile(el) {
        image = el
        document.getElementById('imagePick').click();
    }
    function removePage(el) {
        el.parentElement.parentElement.parentElement.parentNode.removeChild(el.parentElement.parentElement.parentElement);
        pageCount -= 1;
    }
    function validate(el) {

        if (el.children.length > 0) {
            for (var i = 0; i < el.children.length; i++) {
                if (el.children[i].tagName === 'DIV' & el.children[i].className == 'page') {
                    var children = el.children[i].children;
                    for (var i = 0; i < children.length; i++) {
                        if (children[i].className == 'right_panel') {
                            if (children[i].children[0].files.length == 0) {
                                children[i].children[1].style.borderColor = 'red';
                                return false;
                            }
                        }
                        if (children[i].className == 'left_panel') {
                            if (children[i].children[0].children[3].value == '') {
                                children[i].children[0].children[2].style.background = 'red';
                                return false;
                            }
                        }

                    }

                }

            }

        }

        return true;
    }
</script>'''

вот скрипт, который я использую для клонирования моего div и его содержимого, а затем очистки некоторых значений

'''

    {% csrf_token %}

    <div class="title">
        <input type="text" class='text_input_title' placeholder='Book Title' name="title" value="" /> <!-- <input required class="text_input_title" type="text" name="title" placeholder="Book title" />--->
        <button class="btn btn-primary">ok</button>
    </div>
   
    <br /><br /><br /><br /><br />


    <div id="p1" class="row align-items-middle ">
        <div class="col-8 ">
            
            <input type="text" class="fs-2 col-12 rounded" name="sentence" value="" placeholder="Sentence" />
            <div class="row justify-content-center ">

                <img src="../media/books/record.png" class="btns  bg-warning rounded-circle" onclick="recorder(this)" />
                <audio id="recorded_player">
                </audio>
                <img class="btns col-5  rounded-circle" style="background: grey;" id="pr1" src="../media/books/recordPlay.png" onclick="recordPlay(this,'recorded')" />
                <input id="audio_link" type="hidden" name="audio" value="" />

            </div>
            <div class="row ">
                <img id="image1" class="col-2" onclick="addPage(this)" src="../media/add.png" alt="Alternate Text" />
                <img id="image1" class="col-2" onclick="removePage(this)" src="../media/minus.png" alt="Alternate Text" />

            </div>
        </div>
        <div class="col-4 justify-content-center   img-thumbnail rounded">
            <input style="display:none;" id="imagePick" type="file" name="pageImage" onchange="test(this)" accept="image/*" />
            <img id="image" class="col-12 p-1" onclick="ChooseFile(this)" src="../media/add.png" />


        </div>

    </div>

</form>

'''

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