Blobs and files

A Blob is the browser's container for raw bytes: a chunk of data plus a type, like image/png. It's how a page handles anything that isn't text or JSON, such as images, audio, PDFs and zip files. A File is a Blob with a name. Nothing you pick or drop here leaves your computer: it all happens inside this page. Notes.

1. A File is a Blob

What the browser knows

Its first bytes

(pick a file)

From await file.slice(0, 64).arrayBuffer(). Offset, then each byte in hex, then the same bytes as characters (. where there's no printable one).

2. Blob URLs

URL.createObjectURL(file) gives the Blob a URL, so anything that takes a URL can use it: an <img src>, a link, a video. The bytes never leave the browser. The URL only points into this page's memory.

(pick a file in section 1: its URL appears here)

A blob: URL lasts only as long as the page that made it. Reload this page and the old URL points to nothing: the bytes were in this page's memory, and they're gone.

3. Make your own Blob

4. Blobs from elsewhere