Отправить FileList на Flask бэкэнд?

Question

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

<form action="/do-stuff" method="POST" enctype="multipart/form-data">
    <label id="file-uploader-label" for="file-uploader">Upload Files</label>
    <input id="file-uploader" type="file" name="file" accept="image/*" multiple="true" required>

    <button id="btn-upload" type="submit">Upload</button>
</form>

есть форма для ввода нескольких файлов. Я отображаю все файлы в таблице (не показана выше) и даю пользователю возможность удалять элементы из списка файлов следующим образом. :

let fileList = new Array;
const fileUploader = this.document.getElementById('file-uploader');
let uniqueid = 1;

fileUploader.addEventListener('change', function () {

    for (let i = 0; i < fileUploader.files.length; i++) {
        let currFile = fileUploader.files[i];
        fileList[uniqueid] = currFile;

        // Removal and display code

        uniqueid++;
    }
});

Это оставляет мне fileList типа "FileList", содержащий все нужные файлы. Всякий раз, когда я загружаю file-uploader, будут использоваться только самые последние / недавно загруженные файлы, а не все.

Имея полный список - есть ли в javascript способ добавить файлы, содержащиеся в file-uploader, или обходной путь для передачи данных в мой flask бэкэнд (тип werkzeug.datastructures.FileStorage)?

Заранее спасибо:)

Answer 1

Получив полный список файлов, которые вы хотите загрузить, вы можете сделать запрос POST от JavaScript к конечной точке Flask для хранения файлов.

С минимальной формой

<form id="form-files">
    <input id="file-input" type="file" multiple=true />
    <button type="submit">Submit</button>
</form>

Вы можете перехватить действие отправки формы и отправить файлы на конечную точку Flask. Массив fileList поступает из файла загрузки / удаления файла c.

var formFiles = document.getElementById('form-files');

formFiles.addEventListener('submit', function(e) {
    e.preventDefault();
    var formData = new FormData();
    var request = new XMLHttpRequest();
    for (var i = 0; i < fileList.length; i++) {
        formData.append('files[]', fileList[i]);
    }
    request.open('POST', '/upload');
    request.send(formData);
});

Наконец, напишите конечную точку загрузки flask, которая обрабатывает (сохраняет) файлы.

@app.route("/upload", methods=["POST"])
def upload():
    uploaded_files = request.files.getlist("file[]")
    # Store files