JavaScript Academy · Lesson

Blobs and Object URLs

Create and use blob URLs for downloads.

Blobs and Object URLs is a free JavaScript Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the JavaScript Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What Is a Blob?

A Blob (Binary Large Object) represents immutable raw data, such as file contents, in memory. Files are a special kind of Blob with a name and modified date.

Blobs let you build, slice, and download binary data in the browser.

Creating a Blob

Construct a Blob from an array of parts (strings, buffers, other Blobs) and an options object specifying the MIME type.

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

console.log(blob.size);
console.log(blob.type);

Blob From Multiple Parts

The parts array is concatenated in order. You can mix strings and typed arrays.

const blob = new Blob(['line 1\n', 'line 2\n', 'line 3'], {
  type: 'text/plain'
});

console.log(blob.size + ' bytes');

Reading a Blob Back

Blobs expose Promise-based methods text(), arrayBuffer(), and stream() to read their contents.

async function show() {
  const blob = new Blob(['stored data'], { type: 'text/plain' });
  const text = await blob.text();
  console.log(text);
}

show();

Slicing a Blob

blob.slice(start, end) returns a new Blob covering part of the original, without copying the whole thing. Useful for chunked uploads.

const blob = new Blob(['ABCDEFGHIJ'], { type: 'text/plain' });
const chunk = blob.slice(0, 5);

console.log(chunk.size);

Creating an Object URL

URL.createObjectURL(blob) returns a short-lived URL pointing at the in-memory Blob. You can use it as an img.src, a link href, or a video source.

const blob = new Blob(['data'], { type: 'text/plain' });
const url = URL.createObjectURL(blob);

console.log(url.startsWith('blob:'));

Previewing an Uploaded Image

Turn a selected file into an object URL and assign it to an image element for an instant preview, no server round trip needed.

const file = document.querySelector('#picker').files[0];
const url = URL.createObjectURL(file);
const img = document.querySelector('#preview');
img.src = url;

console.log('preview ready');

Triggering a Download

Create a Blob, make an object URL, and click a temporary anchor with a download attribute to save a generated file.

function download(text, filename) {
  const blob = new Blob([text], { type: 'text/plain' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  a.click();
  URL.revokeObjectURL(url);
}

download('report data', 'report.txt');

Revoking Object URLs

Object URLs hold the Blob in memory until you call URL.revokeObjectURL(url). Always revoke when done to avoid memory leaks.

const blob = new Blob(['temp'], { type: 'text/plain' });
const url = URL.createObjectURL(blob);

console.log('using ' + url);
URL.revokeObjectURL(url);
console.log('revoked');

Blobs and JSON

You can build a downloadable JSON file by stringifying data into a Blob with the correct MIME type.

const data = { name: 'Ada', score: 99 };
const blob = new Blob([JSON.stringify(data, null, 2)], {
  type: 'application/json'
});

console.log(blob.type);
console.log(blob.size + ' bytes');

Why Blobs Matter

Blobs and object URLs let you handle binary data entirely client-side: preview uploads, generate downloads, and chunk large files. Remember to revoke URLs when finished. Next you will send files to a server with fetch.

const blob = new Blob(['export'], { type: 'text/csv' });
const url = URL.createObjectURL(blob);
console.log('csv url created:', url.startsWith('blob:'));
URL.revokeObjectURL(url);

Quick Check

After using an object URL for a download, what should you call to free memory?

Recap: Blobs and Object URLs

You learned to handle binary data:

new Blob(parts, { type }) builds immutable binary data.
Read with text(), arrayBuffer(); split with slice().
URL.createObjectURL makes a usable blob: URL for previews and downloads.
Always URL.revokeObjectURL when done to free memory.

Frequently asked questions

Is the “Blobs and Object URLs” lesson free?

Yes — the full text of “Blobs and Object URLs” is free to read here on the web, and the JavaScript Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the JavaScript Academy course, upgrade to CoddyKit PRO.

What will I learn in “Blobs and Object URLs”?

Create and use blob URLs for downloads. You practise JavaScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start JavaScript Academy?

No prior experience is required. JavaScript Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Blobs and Object URLs” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this JavaScript Academy lesson?

Yes. Every JavaScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to JavaScript Academy