I have a basic multiple file upload form like : <input id="file_input" type="file" multiple/>

When the user clicks "browse...", a Windows OS popup opens (file explorer), the user selects 3 files then clicks "Open". Popup closes, the browser's file input says "3 files selected", the user is ready to click "Submit" in order to upload the files. So far so good.

How do I make it so that the user can ADD more files to this list of 3, without him having to select all the files again, in case he missed some files initially? The default browser behavior when the user clicks "Browse..." again is to wipe all the selected files initially picked.

Kindly note that I do NOT want to use an existing library, but pure javascript. I know there are countless jquery scripts or github repos searching for "multiple file upload".

I did not fine anything related to this on the MDN docs : https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications or here : https://w3c.github.io/FileAPI

Right now I'm thinking about a dirty solution such as dynamically generating a new upload form in the DOM when the user clicks "Browse..." (or an "add more files" button). There must be more elegant solutions, right?