Multiple image upload with Fetch API

Question

I have the following code:

HTML:

<input type="file" name="image[]" class="selecao_arquivo" id="selecao_arquivo" multiple>

Javascript:

sendInsucesso.addEventListener('click', e => {
e.preventDefault()
const files = document.querySelector('.selecao_arquivo')
var formData = new FormData(formInsucesso)
for (let i = 0; i < files.length; i++) {
    formData.append(files[i].name, files[i])
}
fetch('library/fetch/fetch_form_insucesso.php', {
    method: 'POST',
    body: new URLSearchParams(formData)
})
.then(response => response.text())
.then(response => console.log(response))
.catch(error => console.error(error))

})

With send to the PHP however, I receive data from files like [Object File].

Answer 1

In fact,

const files = document.querySelector('.selecao_arquivo')

this constant nay is an array, although it is of the Iterable type, this constant is actually an FileList. So, files[i] does not return what you really want.

tries to trade

for (let i = 0; i < files.length; i++) {
    formData.append(files[i].name, files[i])
}

for

for (let i = 0; i < files.length; i++) {
    const file = files.item(i);
    const filename = file.name;
    formData.append(filename, file)
}