Отправить Ajax запрос с файлами из ввода

Question

Я пытаюсь сделать доступной кнопку загрузки файла, по этой причине мне нужно хранить временные файлы var, которые не позволяют использовать формы, поэтому я пытаюсь сделать запрос Ajax, но отправляю пустой список.

Logi c для загрузки добавляемого файла (с использованием фальшивой кнопки загрузки).

var tempFiles = new Array();
$('#filesButton').on('click', function () {
    $('#files').click();
});
$('#files').on('change', function () {
    for (var i = 0; i < document.getElementById("files").files.length; i++)
    {
        tempFiles.push($('#files')[0].files[i]);
    }
    var filenameList = Array.from(tempFiles).map( function (file) {
        return file.name;
    });

    var label = document.getElementById("filesLabel");
    label.textContent = filenameList.join(', ') || defaultLabelText;
    label.title = label.textContent;
});

Ajax Запрос

var object = {
    ...
    files: tempFiles,
    ...
    };
$.ajax({
    url: siteHomeUrl,
    type: "POST",
    contentType: "application/json",
    cache: false,
    data: JSON.stringify(object),
    success: function (response) {
        ...
    },
    error: function (e) {
        ...
    },
    done: function (e) {
        alert(e);
    }
    });
});

html

<div class="col-md-12" th:if = "!*{readOnlyForm}">
    <label for="filesButton">Select files:</label><br>
    <input  type="file" id="files" name="files" multiple style="display: none;">
    <button type="button" id="filesButton">Choose File(e)</button>
    <span id="filesLabel">No file(s) selected</span>
</div>