Blob

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.

To construct a Blob from other non-blob objects and data, use the Blob() constructor. To create a blob that contains a subset of another blob's data, use the slice() method. To obtain a Blob object for a file on the user's file system, see the File documentation.

The APIs accepting Blob objects are also listed on the File documentation.

Constructor

Blob(blobParts[, options])

Returns a newly created Blob object whose content consists of the concatenation of the array of values given in parameter.

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([start[, end[, contentType]]])

Returns a new Blob object containing the data in the specified range of bytes of the source Blob.

Examples

Blob constructor example usage

The Blob() constructor allows one to create blobs from other objects. For example, to construct a blob from string:

var debug = {hello: "world"};
var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'});

var builder = new BlobBuilder();
var fileParts = ['<a id="a"><b id="b">hey!</b></a>'];
builder.append(fileParts[0]);
var myBlob = builder.getBlob('text/xml');

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

Browser compatibility

[1] A version of slice() taking the length as second argument was implemented in WebKit and Opera 11.10. However, since that syntax differed from Array.slice() and String.slice(), WebKit removed support and added support for the new syntax as Blob.webkitSlice().

[2] A version of slice() taking the length as second argument was implemented in Firefox 4. However, since that syntax differed from Array.slice() and String.slice(), Gecko removed support and added support for the new syntax as mozSlice().

[3] 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.

[4] See bug 1048325

Gecko notes: availability in privileged code

To use from chrome code, JSM and Bootstrap scope, you have to import it like this:

Cu.importGlobalProperties(['Blob']);

Blob is available in Worker scopes.

See also

• BlobBuilder
• File
• URL.createObjectURL
• Components.utils.importGlobalProperties