<meta name="viewport" content="width=device-width">
<style>
    img {
        width: 100%;
        height: 200px;
    }
    input {
        width: 100%;
        height: 200px;
    }
    #output {
        font-family: -apple-system;
        font-size: 1em;
    }
</style>

<body>
    <div><img src="apple.gif"></img></div>
    <div><input multiple id="input" type="file"></input></div>
    <div id="output"></div>
</body>

<script>
input.addEventListener("change", () => {
    for (let file of input.files) {
        let pre = document.createElement("pre");
        pre.textContent = `${file.name} (${file.type})`;
        output.appendChild(pre);
    }
});
</script>