How can I let someone upload files one at a time in a file input? [closed]

I want the user to be able to either select multiple files at once or files on at a time and send them through a POST method altogether to the next page.

The 'multiple' option for the doesn't allow users to select multiple files one at a time.

For an example of my end goal you can look at the site wetransfer.com.

I looked it up on the internet but I can't seem to find a solution where you can store all the files on the site and send all previously selected files through a POST-method. This is my HTML form:

<form id="myform" action="index.php" method="post" enctype="multipart/form-data">

<!-- title of the form -->
<h3>Upload File</h3>

<!-- select your files -->
<input type="file" id="uploadFile" name="files[]" multiple />

<!-- add a password/name to your files -->
<input type="text" name="uploadnaam" placeholder="naam upload (verplicht)" autocomplete="off">

<!-- submit the form -->
<button type="submit" id="mySubmitButton" name="save">UPLOAD</button>

</form>

Once it reloads I want the file-information in a POST method.

I know there have been similar questions before but there were no answers that worked for me.

This is what I have in Javascript right now:

//create the array storedFiles where you can add the files
var storedFiles = [];

//when the page is loaded run the function initFileStorage
document.addEventListener("DOMContentLoaded", initFileStorage, false); 

function initFileStorage() {

// add the change listener on file input
document.getElementById("uploadFile")

//if anything changes is the input run the function handleFileSelect
.addEventListener("change", handleFileSelect, false);

//get the form with id="myform"
document.getElementById("myform")

//run the submitMyForm function whenever the form is submitted
.addEventListener("submit", submitMyForm, false);

}

function handleFileSelect(e) {

// check if any files has been selected. If not, exit
if(!e.target.files) return;

//I don't know what this does
var files = e.target.files;
var filesArr = Array.prototype.slice.call(files);

// push new selected files into the common file storage
filesArr.forEach((f) => storedFiles.push(f));
}

function submitMyForm() {

/* upload "storedFiles" along with other values to API */

//create a new formdata
const fd = new FormData();

//add the files to the formdata
fd.append('theFiles', storedFiles);

//send the data through a POST method
fetch('http://localhost/uploadsysteem/index.php', {

method: 'POST',
body: fd

})
.then(res => res.json())
.then(json => console.log(json))
.catch(err => console.error(err));
}

And this is what I'm using in php (for this example):

<?php $userFiles = $_POST['theFiles']; ?>

source https://stackoverflow.com/questions/69290637/how-can-i-let-someone-upload-files-one-at-a-time-in-a-file-input