demo · v143

Drag-drop hex viewer

A genuine file inspector built around the single new primitive. Drop any file; the viewer calls file.bytes(), prints a hex+ASCII dump of the first n bytes, sniffs the magic-number signature, and tells you what kind of file you actually dropped — regardless of extension or MIME type.

drop any file here — or click to select
Drop a file…

What this does

  1. Calls file.bytes() once. No FileReader, no chunked reads — Blob.bytes() returns a complete Uint8Array resolved on a microtask.
  2. Slices the first n bytes and renders them as a classic 16-column hex+ASCII dump.
  3. Compares the first 8 bytes against ~40 known file signatures (PNG, JPEG, PDF, ZIP, WASM, gzip, …) and reports what the file really is.
const file = e.dataTransfer.files[0];
const bytes = await file.bytes();               // Uint8Array
const head  = bytes.slice(0, 8);                 // sniff magic
const dump  = hexAscii(bytes.slice(0, 256));     // render

see also