← flaviocopes.com

The Blob Object

Updated May 28 2019

Psssst! The 2023 WEB DEVELOPMENT BOOTCAMP is starting on FEBRUARY 01, 2023! SIGNUPS ARE NOW OPEN to this 10-weeks cohort course. Learn the fundamentals, HTML, CSS, JS, Tailwind, React, Next.js and much more! ✨

Web Browsers implement a Blob object, which is responsible for holding data.

Blob means “Binary Large Object” and it’s an opaque representation of a chunk of bytes.

Blobs are used for many things.

They can be created from content from the network. They can be saved to disk, or read from a disk. They are the underlying data structure for File used in the FileReader API, for example.

A blob can be sent between Web Workers and iFrames using the Channel Messaging API, and from a server to a client using the Push API.

Blobs can also be referenced using URLs.

You can extract text (or bytes) stored in a blob, and blobs can even be stored directly in IndexedDB, and they can be retrieved from there, too.

See my IndexedDB tutorial

Blobs are a fundamental data type to understand.

A blob can be created:

• using the Blob() constructor
• from another blob, using the Blob.slice() instance method

The constructor takes an array of values. Even if you have just one string to put in the blob, you must wrap it in an array.

Example:

const data = new Blob(['Test'])

You are not required to put a String value. You can pass:

• a String
• an ArrayBuffer
• an ArrayBufferView
• other blobs

The Blob constructor takes an optional second parameter, which represents the MIME type:

const data = new Blob(['Test'], { type: 'text/plain' })

Once you have a Blob object, you can access its 2 properties:

• size returns the length in bytes of the content of the blob
• type the MIME type associated with it

and you can call its only methods, slice().

When you call slice() you can retrieve a part of the blob.

This is an example of creating a new blob from bytes 10 to 20 of aBlob:

const partialBlob = aBlob.slice(10, 20);

Uploading a blob

This code is used as a callback to an input type or drag and drop. We load a blob to a url using XHR, using an f function to track progress:

const uploadBlob = (url, blob, trackProgress) => {
	const xhr = new XMLHttpRequest()
	xhr.open('POST', url)
	xhr.send(blob)
	xhr.upload.onprogress = trackProgress
}

Downloading data from the internet as a blob

We can download data from the internet and store it into a Blob object using this syntax:

const downloadBlob = (url, callback) => {
	const xhr = new XMLHttpRequest()
	xhr.open('GET', url)
	xhr.responseType = 'blob'

	xhr.onload = () => {
    callback(xhr.response)
	}

	xhr.send(null)
}

Blob URLs

I mentioned that blobs can also be referenced using URLs.

Blob URLs are generated by the browser and are internal references. Given a blob, you can generate a URL to it using the URL.createObjectURL() function.

A Blob URL starts with the blob:// scheme.

Once the browser sees that URL, it will serve the corresponding blob stored in memory or in the disk.

Blob URLs are different from Data URLs (starting with data:), because they don’t store the data in the URL. They are also different from File URLs (starting with file:), since they do not reveal sensitive information like the file path.

If you access a Blob URL that is no longer existing, you will get a 404 error from the browser.

Once you generate a blob URL, you can remove it calling the URL.revokeObjectURL() and passing the URL.

Example loading a file from local disk on the page and getting the

In this sample code we have an input element to select an image. Once an image is selected, we remove the input element and we display the image. We also clear the blob once we are done displaying the image:

<input type="file" allow="image/*"  />

const input = document.querySelector('input')

input.addEventListener('change', e => {
	const img = document.createElement('img')
	const imageBlob = URL.createObjectURL(input.files[0])
	img.src = imageBlob

	img.onload = function() {
	  URL.revokeObjectURL(imageBlob)
	}

	input.parentNode.replaceChild(img, input)
})

Reading from the blob

You can’t directly access the data contained in the blob.

To be able to do so, we must use a FileReader object.

I write books for developers 👇🏼