Browsers provide a Blob object for holding binary data.

“Blob” stands for “Binary Large Object”; it is an opaque representation of a chunk of bytes.

Blobs are used in many places: created from network data, saved to or read from disk, and as the underlying type for File in the FileReader API. They can be sent between Web Workers and iframes via the Channel Messaging API, and from server to client via the Push API. Blobs can be referenced by URL, read with FileReader, and stored in IndexedDB.

See the IndexedDB unit

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' })

A Blob has two properties: size (length in bytes) and type (MIME type). It has one method, slice(), which returns a portion of the blob.

Example: create a new blob from bytes 10 to 20 of aBlob:

const partialBlob = aBlob.slice(10, 20)

Uploading a blob

Example: upload a blob with XHR and track progress:

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

Downloading a URL as a blob

Example: download a URL and get the response as a Blob:

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

As mentioned, blobs can be referenced by URL. Use URL.createObjectURL(blob) to create a blob URL; the browser generates an internal reference. Blob URLs use the blob: scheme. When that URL is requested, the browser serves the blob from memory or disk.

Blob URLs differ from Data URLs (data:) because they do not embed the data in the URL. They differ from File URLs (file:) because they do not expose the file path. If you use a blob URL after revoking it or after the blob is freed, the browser may return a 404.

Revoke a blob URL with URL.revokeObjectURL(url) when you no longer need it.

Example: load an image from a file input and display it

Select an image with an input, display it, then revoke the blob URL:

<input type="file" accept="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 blob content

You cannot read blob content directly; use a FileReader to read it.

Lessons in this unit:

0:	Introduction
1:	The File object
2:	FileList
3:	FileReader
4:	▶︎ Blob
5:	FormData
6:	Accept only images in file input
7:	Check if checkbox is checked
8:	Reset a form
9:	File upload with server handling
10:	Drag and drop file upload
11:	Validating file size before upload