A Blob (Binary Large Object) is an immutable, raw‑data container supplied by the browser. It can hold binary or textual data and exposes methods for streaming, slicing, and type inspection.

💡 Notes: Because Blobs are immutable, every operation that modifies content (slice(), for instance) returns a new Blob.

Syntax

const blob = new Blob(blobParts?, options?);

Parameters

• blobParts (Iterable <ArrayBuffer | ArrayBufferView | Blob | string>)
  Optional array/iterable whose items are concatenated into the final Blob.
• options (BlobPropertyBag) – Object with:
  • type (string) – MIME, e.g. "image/png".
  • endings ("transparent" | "native") – Line‑ending normalisation for text parts.

Example

// create a PNG payload
const pngBlob = new Blob([Uint8ArrayView], {type: "image/png"});

Property	Type	Description
size	number	Length in bytes; 0 for empty Blobs.
type	string	MIME type. Empty string if unknown.

arrayBuffer()

• Returns: Promise<ArrayBuffer>
• Usage: Full binary copy into memory, e.g. for WebGL uploads.

text()

• Returns: Promise<string> decoded as UTF‑8.
• Usage: Reading JSON or plaintext files.

stream()

• Returns: ReadableStream<Uint8Array>
• Usage: Piping to Response / WritableStream without buffering.

slice(start?, end?, type?)

• start (number) – Byte index; default 0.
• end (number) – Exclusive index; default size.
• type (string) – Override MIME.
• Returns: new Blob backed by the same bytes.

// first 1 MB of video:
const preview = videoBlob.slice(0, 1_048_576, "video/mp4");

URL.createObjectURL(blob)

Creates a short‑lived blob: URL pointing to in‑memory data.

URL.revokeObjectURL(url)

Manually release memory when the Blob URL is no longer needed.

// Display dynamically‑generated image
const url = URL.createObjectURL(pngBlob);
img.src = url;

// Later…
URL.revokeObjectURL(url);

File ≅ Blob + Name/Metadata

const file = new File(blobParts, "report.pdf", {type: "application/pdf", lastModified: Date.now()});

FileReader Methods

• readAsArrayBuffer(blob)
• readAsText(blob, encoding?)
• readAsDataURL(blob) → Base64 string

⚠️ Notes: FileReader is main‑thread‑only; prefer blob.arrayBuffer() in modern code, especially inside Web Workers.

// POST raw audio to server
fetch("/upload", {
	method: "POST",
	headers: {"Content-Type": "audio/wav"},
	body: audioBlob            // Blob streams automatically
});

Conversely, responses expose response.blob(), response.arrayBuffer(), or response.text() for decoding.

• Slice instead of full copies to avoid doubling memory.
• Stream large Blobs (.stream()) to avoid locking the UI thread.
• Call URL.revokeObjectURL() in onload/onerror callbacks.
• Use Response/ReadableStream rather than FileReader for parallelism.

All evergreen browsers fully support core Blob APIs. Streaming (stream()) requires:

• Chromium ≥ 76
• Firefox ≥ 121
• Safari ≥ 14.1 (partial polyfill)

// create
const b = new Blob([data], {type:"application/json"});

// inspect
b.size;           // bytes
b.type;           // "application/json"

// consume
await b.text();   // string
await b.arrayBuffer();
const stream = b.stream();

// mutate (returns new Blob)
const head = b.slice(0, 512);

// object‑URL
const url = URL.createObjectURL(b);
URL.revokeObjectURL(url);