Files & Blobs

Boxes of bytes the browser can hold

Web apps often need to work with local or generated files: preview an image before upload, export a CSV report, let a drawing app download a PNG, inspect a dropped text file, or store a draft for later. The browser gives JavaScript two central objects for this work: Blob and File.

A Blob is a sequence of bytes with a MIME type label. A File is a Blob with file metadata such as a name and a last-modified time. You do not get to browse the visitor’s disk. The user must choose or drop files, and even then the browser exposes the filename, not the full private path.

This lesson builds that mental model, then turns it into browser UI: a Blob builder, a FileReader event replay, a progress reader, and a local file inspector with drag-and-drop.

Blob stands for “binary large object,” but the everyday meaning is simpler: some bytes JavaScript can pass around. A Blob may contain text, JSON, an image, a ZIP file, audio, or bytes you made yourself. It has two always-available properties: size in bytes and type, a MIME label like text/plain or an empty string.

A File is more specific. It is what a file input or drop zone usually gives you. It has every Blob ability, plus name and lastModified. That means any function that accepts a Blob can accept a File too.

The type string deserves respect and suspicion. It helps pick a preview strategy, but it is not verified by the browser. A text file can be mislabeled. A user’s operating system can report an empty type. A malicious upload can lie. Treat client-side labels as hints and validate important files on the server.

Let’s create a Blob from text. Strings become bytes when they are added to a Blob. The browser encodes them, usually as UTF-8. That is why a string’s length and a Blob’s size can differ: accents and emoji need more than one byte.

1const text = "Hello, café 🌍";2const blob = new Blob([text], { type: "text/plain" });3console.log(text.length);4console.log(blob.size);5console.log(blob.type);6console.log(await blob.text());7console.log([...new Uint8Array(await blob.arrayBuffer())].slice(0, 8));8console.log(await blob.slice(7, 12).text());

Try café, then try hello, then add the globe character from the starter text. The string length tells you about JavaScript’s string representation; blob.size tells you how many bytes are in the sealed box. For the deeper string side, see Unicode and string internals.

The builder also reads the same Blob in three different ways: text() turns it back into a string, arrayBuffer() reveals bytes, and slice() creates a smaller Blob from a byte range. None of those changes the original Blob.

Many browser elements need URLs. An image preview wants an src. A download link wants an href. A video player wants a source. A Blob is not a URL, so the browser lets you ask for a temporary one with URL.createObjectURL(blob).

1const blob = new Blob(["download me"], { type: "text/plain" });2const url = URL.createObjectURL(blob);3link.href = url;4link.download = "note.txt";5 6// Later, when the preview or link is no longer needed:7URL.revokeObjectURL(url);

Keep object URLs only while the page needs them. When a preview is replaced, a Reset button clears it, or a React component unmounts, revoke the old URL. That cleanup tells the browser it may release the underlying bytes. Do not revoke immediately before an image has loaded or a click has used the link.

Object URLs are different from data URLs. A data URL embeds base64 text directly in the URL and is often about one third larger. FileReader’s readAsDataURL() can create one, but object URLs are usually better for previews and downloads.

Modern Blob methods are promise-based: await blob.text() gives you the whole text, and await blob.arrayBuffer() gives you the bytes. FileReader is older. You create a reader, attach event listeners, then start a read with methods such as readAsText(), readAsArrayBuffer(), or readAsDataURL().

1const events = [];Run2const reader = makeReader("success");3 4reader.addEventListener("loadstart", () => events.push("loadstart"));5reader.addEventListener("progress", () => events.push("progress"));6reader.addEventListener("load", () => events.push("load"));7reader.addEventListener("abort", () => events.push("abort"));8reader.addEventListener("error", () => events.push("error"));9reader.addEventListener("loadend", () => events.push("loadend"));10 11reader.readAsText(blob);12console.log(events.join(" -> "));

On success you normally see loadstart, some number of progress events, load, and loadend. If the read is aborted, abort happens before the final loadend. If it fails, error happens before loadend. For basic whole-file reads, promises are easier; for visible progress, FileReader still has a job.

1const blob = new Blob([largeBuffer], { type: "application/octet-stream" });2const reader = new FileReader();3 4reader.addEventListener("progress", (event) => {5  if (event.lengthComputable) {6    console.log(Math.round((event.loaded / event.total) * 100) + "%");7  } else {8    console.log(event.loaded + " bytes read");9  }10});11 12reader.addEventListener("load", () => console.log(reader.result.byteLength));13reader.readAsArrayBuffer(blob);

A file input and a drop zone both put File objects in your hands after the user chooses to share them with the page. The page can then inspect metadata, read the bytes, or send the file later. Merely selecting or dropping a file does not upload it.

1dropZone.addEventListener("dragover", (event) => {2  event.preventDefault();3});4 5dropZone.addEventListener("drop", async (event) => {6  event.preventDefault();7  const [file] = event.dataTransfer.files;8  if (!file) return;9 10  console.log(file.name, file.size, file.type, file.lastModified);11  if (file.type.startsWith("image/")) {12    preview.src = URL.createObjectURL(file);13  } else if (file.type.startsWith("text/") || file.name.endsWith(".txt")) {14    preview.textContent = (await file.text()).slice(0, 400);15  }16});

The important drag-and-drop detail is dragover. Calling event.preventDefault() there tells the browser your element is a valid drop target. In drop, event.dataTransfer.files contains the files. Some folder drops do not produce ordinary File objects, so a friendly file UI handles an empty list without crashing.

When you build real upload forms, combine these File objects with the ideas from FormData. When you store generated files or offline responses, compare the tools in Cache API and file storage.

Every file task asks a different question. Do you need text, exact bytes, a stream of chunks, a preview URL, a self-contained base64 URL, or progress events? Pick the API that matches the job instead of memorizing one “file reading” method.

If blob.stream() looks interesting, the Streams and progress lesson explains chunk-by-chunk processing. This lesson’s main rule is simpler: whole text, whole bytes, stream chunks, preview URL, or events.

Files and Blobs show up whenever a browser app touches user data without a page refresh. A few realistic patterns:

• Client-side export: turn rows into CSV text, create a Blob, make an object URL, and attach it to an <a download>.
• Preview before upload: use a File from an input, show images with an object URL, and show text with file.text().
• Generated media: canvas and media APIs can produce Blobs that become downloads or previews.
• Offline workflows: store file-shaped data in OPFS or IndexedDB, and cache network Responses for app shells.

• “Blob size is string length.” No. Blob size is bytes after encoding. Text with accents or emoji proves the difference.
• “The type proves the file format.” No. type is a label and can be empty or wrong.
• “Selecting a file uploads it.” No. Uploading requires your code to send it, often with FormData and fetch.
• “Object URLs clean themselves instantly.” They last until revoked or the document goes away. Revoke long-lived previews.
• “FileReader is the only way to read files.” Modern Blob methods are usually simpler unless you need events.
• “The browser exposes the full path.” It exposes the file name, not the private folder path.

Key takeaways

• A Blob is a byte box with a type label; a File is a Blob with a name and last-modified time.
• Blob size is bytes, not string length. Unicode text makes that difference visible.
• Use text(), arrayBuffer(), and stream() for modern reads; use FileReader for progress, abort, and legacy data URL flows.
• Object URLs are temporary tickets for previews and downloads. Revoke them when they are no longer needed.
• File inputs and drop zones never reveal full local paths and never upload by themselves.

Up next: Device & platform APIs.