Blob

Summary

A Blob object represents a file-like object of immutable, raw data. Blobs represent data that isn't necessarily in a JavaScript-native format. The File interface is based on Blob, inheriting blob functionality and expanding it to support files on the user's system.

An easy way to construct a Blob is by invoking the Blob constuctor. Another way is to use the slice() method to create a blob that contains a subset of another blob's data.

Constructor

Blob Blob(
  [optional] Array parts,
  [optional] BlobPropertyBag properties
);

Parameters

parts
An Array of data objects to put into the new Blob object. This can be any number of ArrayBuffer, ArrayBufferView (typed array), Blob, or strings, in any order.
properties
A BlobPropertyBag object that provides the properties for the new Blob object.

BlobPropertyBag

An object which contains two properties: type and endings.

type
A string representing the MIME type of the Blob object.
endings
Specifies how strings containing \n are to be written out. This can be "transparent" (endings unchanged) or "native" (endings changed to match host OS filesystem convention). The default value is "transparent". It corresponds to the endings parameter of the deprecated BlobBuilder.append().
Note: Some browsers offer BlobBuilder, which lets you iteratively append data to a blob, then retrieve the completed blob when you're ready to use it for something. However, BlobBuilder is not available in every browser and all BlobBuilder implementations have vendor prefixes. It is, moreover, deprecated in favor of the Blob constructor so the Blob constructor should be used instead whenever possible.

Properties

Blob.size Read only
The size, in bytes, of the data contained in the Blob object.
Blob.type Read only
A string indicating the MIME type of the data contained in the Blob. If the type is unknown, this string is empty.

Methods

Blob.slice()
Returns a new Blob object containing the data in the specified range of bytes of the source Blob.
Note: Be aware that the slice() method has vendor prefixes on some browsers and versions: blob.mozSlice() for Firefox 12 and earlier and blob.webkitSlice() in Safari. An old version of the slice() method, without vendor prefixes, had different semantics, and is obsolete. The support for blob.mozSlice() has been dropped with Firefox 30.

Examples

Blob constructor example usage

The following code:

var aFileParts = ['<a id="a"><b id="b">hey!</b></a>'];
var oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // the blob

is equivalent to:

var oBuilder = new BlobBuilder();
var aFileParts = ['<a id="a"><b id="b">hey!</b></a>'];
oBuilder.append(aFileParts[0]);
var oMyBlob = oBuilder.getBlob('text/xml'); // the blob

The BlobBuilder interface offers another way to create Blobs, but is now deprecated and should no longer be used.

Example for creating a URL to a typed array using a blob

The following code:

var typedArray = GetTheTypedArraySomehow();
var blob = new Blob([typedArray], {type: 'application/octet-binary'}); // pass a useful mime type here
var url = URL.createObjectURL(blob);
// url will be something like: blob:d3958f5c-0777-0845-9dcf-2cb28783acaf
// now you can use the url in any context that regular URLs can be used in, for example img.src, etc.

Example for extracting data from a Blob

The only way to read content from a Blob is to use a FileReader. The following code reads the content of a Blob as a typed array.

var reader = new FileReader();
reader.addEventListener("loadend", function() {
   // reader.result contains the contents of blob as a typed array
});
reader.readAsArrayBuffer(blob);

By using other methods of FileReader, it is possible to read the contents of a Blob as a string or a data URL.

Specifications

Specification Status Comment
File API Working Draft Initial definition.

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 5 4 10 11.10 5.1
slice() 10 webkit
21
5 moz
13
10 12 5.1 (534.29) webkit
Blob() constructor 20 13.0 (13.0) 10 12.10 6 (536.10)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? 13.0 (13.0) ? ? ?

Notes on the slice() implementations

The slice() method had initially taken length as the second argument to indicate the number of bytes to copy into the new Blob. If you specified values such that start + length exceeded the size of the source Blob, the returned Blob contained data from the start index to the end of the source Blob.

That version of the slice() was implemented in Firefox 4, WebKit, and Opera 11.10. However, since that syntax is differed from Array.slice() and String.slice(), Gecko and WebKit removed support and added support for the new syntax as mozSlice()/Blob.webkitSlice.

Starting in Gecko 13.0 (Firefox 13.0 / Thunderbird 13.0 / SeaMonkey 2.10) and Chrome 21, slice() is no longer prefixed. The support for mozSlice() has been dropped with Gecko 30.0 (Firefox 30.0 / Thunderbird 30.0 / SeaMonkey 2.27).‡

Gecko notes

Prior to Gecko 12.0 (Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9), there was a bug that affected the behavior of slice(); it did not work for start and end positions outside the range of signed 64-bit values; it has now been fixed to support unsigned 64-bit values.

See also

Document Tags and Contributors

Last updated by: Brettz9,