Input type = multiple files - add files sequentially with the number limit for input and preview

See more:

Javascript

jQuery

Hello
I want the previous files not to be deleted after several selections (Input type=file multiple - add files sequentially), and to limit the number and preview the images.
How can I combine the two codes?

What I have tried:

code1

function handler() {
    let inputs = $('.file-input'), a = [];
    for (let i = 0; i < inputs.length; ++i) {
        a = a.concat([].map.call(inputs[i].files, function(a) { return a.name }))
    }
    alert("Files selected so far:\n" + a.join('\n'))

    let input = document.createElement('input');
    input.type = "file";
    input.onchange = handler;
    input.className = "file-input";
    input.multiple = "multiple";

    this.parentNode.insertBefore(input, this);
    this.style.display = 'none';
}

document.getElementById('input').onchange = handler;

code2

<div class="upload__box">
<div class="upload__img-wrap"></div>
</div>

jQuery(document).ready(function () {
    ImgUpload();
});

function ImgUpload() {
    let imgWrap = "";
    let imgArray = [];

    $('.upload__inputFile').each(function () {
        $(this).on('change', function (e) {
            imgWrap = $(this).closest('.upload__box').find('.upload__img-wrap');
            let maxLength = $(this).attr('data-max_length');

            let files = e.target.files;
            let filesArr = Array.prototype.slice.call(files);
            let iterator = 0;
            filesArr.forEach(function (f, index) {

                if (!f.type.match('image.*')) {
                    return;
                }

                if (imgArray.length > maxLength) {
                    return false
                } else {
                    let len = 0;
                    for (let i = 0; i < imgArray.length; i++) {
                        if (imgArray[i] !== undefined) {
                            len++;
                        }
                    }
                    if (len > maxLength) {
                        return false;
                    } else {
                        imgArray.push(f);

                        let reader = new FileReader();
                        reader.onload = function (e) {
                            let html = "<div class='upload__img-box'><div style='background-image: url(" + e.target.result + ")' data-number='" + $(".upload__img-close").length + "' data-file='" + f.name + "' class='img-bg'><div class='upload__img-close'></div></div></div>";
                            imgWrap.append(html);
                            iterator++;
                        };
                        reader.readAsDataURL(f);
                    }
                }
            });
        });
    });

    $('body').on('click', ".upload__img-close", function (e) {
        let file = $(this).parent().data("file");
        for (let i = 0; i < imgArray.length; i++) {
            if (imgArray[i].name === file) {
                imgArray.splice(i, 1);
                break;
            }
        }
        $(this).parent().parent().remove();
    });
}

$(".remove").click(function(){
    $(this).parent(".pip").remove();
});