fileupload.html

<!DOCTYPE html>
<html>

<!--
    Pretty much lifted verbatim from this:
    https://stackoverflow.com/questions/31746837/reading-uploaded-text-file-contents-in-html
-->

<head>
    <style>
        label {
            cursor: pointer;
        }

        textarea {
            width: 400px;
            height: 150px;
        }
    </style>
</head>


<body>
    <div>
        <label for="input-file">Specify a file:</label><br>
        <input type="file" id="input-file">
    </div>

    <textarea id="content-target"></textarea>
</body>
<script>
    document.getElementById('input-file')
        .addEventListener('change', getFile)

    function getFile(event) {
        const input = event.target
        if ('files' in input && input.files.length > 0) {
            placeFileContent(
                document.getElementById('content-target'),
                input.files[0])                
        }
    }

    function placeFileContent(target, file) {
        readFileContent(file).then(content => {
            target.value = content;
            console.log(content);
        }).catch(error => console.log(error))
    }

    function readFileContent(file) {
        const reader = new FileReader()
        return new Promise((resolve, reject) => {
            reader.onload = event => resolve(event.target.result)
            reader.onerror = error => reject(error)
            reader.readAsText(file)
        })
    }
</script>

</html>