JavaScript file upload

[stanmertens]

Hello,

I'm trying to upload files to Flask using Javascript. On this page I can read how to do that with an HTML form. However I'm not able to do the same with pure JavaScript.

To replicate:

const form = new FormData();
const files = document.getElementById('media-files').files;
for (let i = 0; i < files.length; i++) {
    form.append(`file[${i}]`, files[i]);
}
await fetch('/api/v1/media', {
    method: 'POST',
    body: form,
    headers: {'Content-Type': 'multipart/form-data'}
});

In Flask request.data is not empty. But request.files and request.form are.

Any help would be greatly appreciated.

Environment:

• Python version: 3.11
• Flask version: 2.2.2

[ThiefMaster]

Just FYI, file[${i}] is usually wrong. If you use getlist() on the server side, use just file or whatever name you want without any bracket stuff (this isn't PHP) and it will work correctly.

I also suggest print()-ing request.data, request.files and request.form and posting the output here. Also add some console logs to make sure files[i] is what you expect it to be.