Small browser-only example for hashing a selected file with the Web Crypto API.
The file is read locally by the browser. It is not uploaded anywhere.
crypto.subtle.digestUse the full browser version here:
Browse more:
| const fileInput = document.querySelector("#fileInput"); | |
| const output = document.querySelector("#output"); | |
| fileInput.addEventListener("change", async () => { | |
| const file = fileInput.files?.[0]; | |
| if (!file) { | |
| output.textContent = "No file selected."; | |
| return; | |
| } | |
| try { | |
| output.textContent = "Hashing..."; | |
| const digest = await hashFileSHA256(file); | |
| output.textContent = [ | |
| `File: ${file.name}`, | |
| `Size: ${formatBytes(file.size)}`, | |
| `SHA-256: ${digest}`, | |
| ].join("\n"); | |
| } catch (error) { | |
| output.textContent = `Error: ${error.message}`; | |
| } | |
| }); | |
| async function hashFileSHA256(file) { | |
| const buffer = await file.arrayBuffer(); | |
| const hashBuffer = await crypto.subtle.digest("SHA-256", buffer); | |
| return bufferToHex(hashBuffer); | |
| } | |
| function bufferToHex(buffer) { | |
| return [...new Uint8Array(buffer)] | |
| .map((byte) => byte.toString(16).padStart(2, "0")) | |
| .join(""); | |
| } | |
| function formatBytes(bytes) { | |
| if (bytes === 0) return "0 B"; | |
| const units = ["B", "KB", "MB", "GB"]; | |
| const index = Math.floor(Math.log(bytes) / Math.log(1024)); | |
| const value = bytes / Math.pow(1024, index); | |
| return `${value.toFixed(index === 0 ? 0 : 2)} ${units[index]}`; | |
| } |
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>Hash a File in the Browser</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <script type="module" src="./hash-file.js"></script> | |
| <style> | |
| body { | |
| font-family: system-ui, sans-serif; | |
| max-width: 720px; | |
| margin: 40px auto; | |
| padding: 0 16px; | |
| line-height: 1.5; | |
| } | |
| code, | |
| pre { | |
| font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; | |
| } | |
| pre { | |
| white-space: pre-wrap; | |
| word-break: break-word; | |
| padding: 16px; | |
| border: 1px solid #ddd; | |
| border-radius: 8px; | |
| } | |
| input { | |
| margin: 16px 0; | |
| } | |
| .note { | |
| opacity: 0.75; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Hash a file in the browser</h1> | |
| <p class="note"> | |
| Select a file and generate a SHA-256 checksum locally in the browser. | |
| </p> | |
| <input id="fileInput" type="file" /> | |
| <h2>SHA-256</h2> | |
| <pre id="output">No file selected.</pre> | |
| <p> | |
| Full browser tools: | |
| <a href="https://altrepo.net/hash/" target="_blank" rel="noopener"> | |
| AltRepo Hash Tools | |
| </a> | |
| </p> | |
| </body> | |
| </html> |