<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>Upload fixture</title></head>
<body>
    <input id="single" type="file" accept="application/pdf" hidden>
    <input id="multiple" type="file" multiple>
    <form id="form"><button type="submit">Submit</button></form>
    <output id="events"></output>
    <script>
        let submitted = false;
        document.querySelector('#form').addEventListener('submit', event => {
            event.preventDefault();
            submitted = true;
        });
        for (const input of document.querySelectorAll('input[type=file]')) {
            input.addEventListener('change', () => {
                document.querySelector('#events').textContent = JSON.stringify({
                    names: Array.from(input.files, file => file.name),
                    sizes: Array.from(input.files, file => file.size),
                    submitted
                });
            });
        }
    </script>
</body>
</html>