index.html

<html>
<body>
    <h1>File to SHA256</h1>
    <p>Choose a file under 1GB:</p>
    <input type="file" id="myfile" onchange="onMyfileChange(this)" />
    <br>
    <code id="hash"></code>
    <script src="https://unpkg.com/jszip@3.7.1/dist/jszip.js" type="text/javascript"></script>
    <script type="text/javascript">
        function onMyfileChange(fileInput) {
            if(fileInput.files[0] == undefined) {
                return ;
            }
            var filename = fileInput.files[0].name;
            // var filesize = fileInput.files[0].size;
            var reader = new FileReader();
            reader.onload = function(ev) {
                console.log("File", filename, ":");
                // 
                crypto.subtle.digest('SHA-256', ev.target.result).then(hashBuffer => {
                    // Convert hex to hash, see https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/digest#converting_a_digest_to_a_hex_string
                    const hashArray = Array.from(new Uint8Array(hashBuffer));
                    const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join(''); // convert bytes to hex string
                    console.log(hashHex);
                    document.getElementById('hash').innerHTML = hashHex;
                }).catch(ex => console.error(ex));
            };
            reader.onerror = function(err) {
                console.error("Failed to read file", err);
            }
            reader.readAsArrayBuffer(fileInput.files[0]);
        }
    </script>
</body>
</html>