<html>
    <body>
<?php if (count($_FILES) === 0) {  ?>
        <ol>
        <li>Select a file and then click the 'clear file' button. File input value should clear out.</li>
        <li>Select a file. Then select another file and make sure the surrogate's input value updates to the new one.
        Click submit and make sure the second selected file is the one to be uploaded.</li>
        </ol>
        <form method=post enctype="multipart/form-data" action="<?= $_SERVER['PHP_SELF'] ?>">
        <input name=files type=file id=filey />
        <input name=submit type=submit></input>
        </form>
        <button onclick=clearfile()>clear file</button>
        <br>
        <div id=message />
<?php } else {
    foreach ($_FILES as $info) {
        $name = $info['name'];
        echo "file to be uploaded: $name";
    }
    echo "<br><a href=" . $_SERVER['PHP_SELF'] . ">go back to form</a>";
} ?>
    </body>
    <script>
    var file = document.getElementById('filey');
    var msg = document.getElementById('message');
    file.addEventListener('change', showmessage);
    function showmessage(){
        msg.innerText = `file input value on surrogate: '${file.value}'`;
    }
    function clearfile(){
        file.value = '';
        showmessage();
    }
    showmessage();
    </script>
</html>
