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.

Note: 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.

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.

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

Before the Blob constructor was available, this could be accomplished through the BlobBuilder API, which is now deprecated:

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.buffer], {type: 'application/octet-stream'}); // 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
The definition of 'Blob' in that specification.
Working Draft Initial definition

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 5Edge Full support YesFirefox Full support 4IE Full support 10Opera Full support 11Safari Full support 5.1WebView Android ? Chrome Android ? Edge Mobile Full support YesFirefox Android Full support 14Opera Android ? Safari iOS ? Samsung Internet Android ?
Blob() constructor
Experimental
Chrome Full support 20Edge ? Firefox Full support 13
Notes
Full support 13
Notes
Notes Before Firefox 16, the second parameter, when set to null or undefined, leads to an error instead of being handled as an empty dictionary.
IE Full support 10Opera Full support 12Safari Full support 8WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Full support 14
Notes
Full support 14
Notes
Notes Before Firefox 16, the second parameter, when set to null or undefined, leads to an error instead of being handled as an empty dictionary.
Opera Android ? Safari iOS ? Samsung Internet Android ?
sizeChrome Full support 5Edge Full support 12Firefox Full support 4IE Full support 10Opera Full support 11Safari Full support 5.1WebView Android No support NoChrome Android No support NoEdge Mobile Full support YesFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
typeChrome Full support 5Edge Full support 12Firefox Full support 4IE Full support 10Opera Full support 11Safari Full support 5.1WebView Android No support NoChrome Android No support NoEdge Mobile Full support YesFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
sliceChrome Full support 21
Full support 21
No support 5 — 21
Prefixed
Prefixed Requires the vendor prefix: webkit
Edge Full support 12Firefox Full support 13
Notes
Full support 13
Notes
Notes Prior to Gecko 12.0 (Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9), there was a bug that affected the behavior of Blob.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.
No support 5 — 13
Prefixed
Prefixed Requires the vendor prefix: moz
IE Full support 10Opera Full support 12Safari Full support 5.1
Prefixed
Full support 5.1
Prefixed
Prefixed Requires the vendor prefix: webkit
WebView Android ? Chrome Android ? Edge Mobile Full support YesFirefox Android Full support 14Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

See also