Platform under construction

JSON & Structured Data

Advanced

Blob & File

Blob represents raw file-like data. File extends Blob with a filename and metadata.

const blob = new Blob(["Hello"], { type: "text/plain" });
const text = await blob.text();

console.log(text);

JSON & Structured Data

Blob and File are browser data containers for binary and file-like content.

Blob is useful when you need to create, read or download raw data in the browser. It can hold text, JSON, images, bytes and other file-like content.

File is a Blob with a name, lastModified timestamp and file-specific metadata. File objects often come from file inputs or drag-and-drop.

Blob methods such as text and arrayBuffer are asynchronous. Large files should be handled carefully to avoid memory problems.

Blob

Immutable raw data with a MIME type.

File

A Blob with a name and file metadata.

blob.text()

Reads Blob content as text.

URL.createObjectURL

Creates a temporary local URL for a Blob.

Examples

Structured data code should show the boundary clearly.

Revoke object URLs after use

const url = URL.createObjectURL(blob);
link.href = url;

link.addEventListener("click", () => {
  setTimeout(() => URL.revokeObjectURL(url), 0);
});

Creating object URLs forever

const url = URL.createObjectURL(blob);
preview.src = url;

// Not revoking many object URLs can waste memory.

Code patterns

Reusable examples for quick reference.

These patterns focus on the data boundaries you will use constantly: JSON, URLs, forms, files, fetch objects and binary buffers.

Create text Blob

Build file-like data in memory.

const blob = new Blob(["Hello"], { type: "text/plain" });

Read text

Blob reading is asynchronous.

const text = await blob.text();

Create File

Add a filename around Blob content.

const file = new File(["Hello"], "message.txt", {
  type: "text/plain"
});

Object URL

Create and revoke temporary Blob URLs.

const url = URL.createObjectURL(blob);

URL.revokeObjectURL(url);

Rules that matter

Parse, validate and convert data at the edges.

Structured data becomes reliable when every boundary is explicit: text to object, form to values, URL to parameters, response to JSON and bytes to meaning.

Use Blob for file-like data

It can hold text or binary content.

Use File for named file data

File adds name and metadata.

Read asynchronously

Blob text and arrayBuffer return promises.

Revoke object URLs

Temporary Blob URLs should be cleaned up.

Check file type and size

Never trust uploaded file metadata alone.

Avoid loading huge files blindly

Large blobs can pressure memory.

Production thinking

Trust data only after the code has proved its shape.

Why does this matter?

Blob and File make browser JavaScript capable of handling real files without immediately uploading them.

Accessibility

File previews and downloads should have clear labels, names and status text.

Production note

Production file handling should validate type, size and lifecycle of object URLs.

SEO note

Generated downloads are not crawler content, but file metadata and labels still affect user trust.

Live code lab

Change the HTML, CSS or JavaScript and run the result.

The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.

Mini assignment

Try this now.

Change the MIME type.
Create a File instead of a Blob.
Add an object URL and then revoke it.

Practice assignment

Do this before moving to the next topic.

Create a text Blob.
Read it with blob.text().
Explain when to revoke object URLs.

HTML + JavaScript CSS

Live preview

Self-check

Before you continue, prove that you understand Blob & File.