One ugly way you might be able to solve this with JS and HTML is to create multiple forms, each with one file input, that look like they’re all one form.
I misspoke up ^^ there! You can currently have multiple file fields per form, but only one file per field. So I’m afraid the only way to currently upload multiple files in the same form is to have multiple file inputs. Not the same as the multiple keyword, but not as bad as my previous suggestion above- and possible with only JS and HTML.
Ok I found a way to do this using <input type="file" multiple>. You have to make manually (or generate using a templating language such as Pug like I did) a fixed amount of hidden single file inputs in HTML and then when you send the form, fill them in JS:
const file = document.getElementById('file'); // The <input type="file" multiple>
const hiddenInputs = document.getElementsByClassName('hidden-input');
document.getElementById('form').addEventListener('submit', event => {
const files = file.files;
if (files.length > hiddenInputs.length) {
alert(`Can't send more than ${hiddenInputs.length} files.`);
return event.preventDefault();
}
file.remove();
for (let i = 0; i < files.length; ++i) {
// Apparently you can't generate or modify a FileList but here's a workaround I found on StackOverflow:
const transfer = new DataTransfer();
transfer.items.add(files[i]);
hiddenInputs[i].files = transfer.files;
}
});
Make sure the hidden inputs have unique names, in my case numbers from 0 to 9.
I tried to do this but I am not sure I did this correctly. I have two file fields (they are clicks on a text link that evoke upload) but when I click the first and upload, then the second and upload, the second file is the only one that sticks.
Sounds like it could be an issue with how you’re handling form inputs, since it does work to have two different file fields that each accept one file. Could you please take a look at the POST request body in your browser dev tools and let us know if it includes the first file?