Умножьте тип файла ввода, добавьте и удалите элемент (изображения) с предварительным просмотром

Question

Мне нужна помощь, мне нужно сделать функцию, которая будет заполнять массив кратных входных файлов предварительными просмотрами изображений, а также удалять их из массива и предварительного просмотра

У меня есть такая функциональность, но она неработают, файлы из массива обычно не удаляются

var files = [];

$("#uploadBtn").change(function (e) {
    for (var i = 0; i < e.target.files.length; i++) {
        var f = e.target.files[i];
        files.push(f);
        var fileReader = new FileReader();
        fileReader.onload = (function (event) {
            var fileHtml = $('<span data-id="'+ event.total +'" class="pip" data-name="'+ f.name +'"><img class="imageThumb" src="'+ event.target.result +'" alt=""><br/><span class="remove" draggable="false"><img draggable="false" class="emoji" src="/wp-content/themes/dillan/assets/dist/img/close-button.png"></span></span>');
            $('#imagePreview').append(fileHtml);
        });
        fileReader.readAsDataURL(f);
    }
});

$('#imagePreview').delegate(".remove", "click", function () {
    $(this).parent(".pip").remove();
    var dataFileId = $(this).parent(".pip").data('id');
    var deleteFiles = files.filter(function (value) {
        if(value.size != dataFileId) {
            return value;
        }
    });
    files = deleteFiles;
});

var wpcf7Elm = document.querySelector( '.wpcf7' );
wpcf7Elm.addEventListener( 'wpcf7mailsent', function( event ) {
    files = [];
    $('#imagePreview').html('');
}, false );