Blob

A Blob object represents a file-like object of immutable, raw data; they can be read as text or binary data, or converted into a ReadableStream so its methods can be used for processing the data. Blobs can 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.

Using blobs

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 in the File documentation.

Constructor

Blob()
Returns a newly created Blob object which contains a concatenation of all of the data in the array passed into the constructor.

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 blob on which it's called.
Blob.stream()
Returns a ReadableStream that can be used to read the contents of the blob.
Blob.text()
Returns a promise that resolves with a USVString containing the entire contents of the blob interpreted as UTF-8 text.
Blob.arrayBuffer()
Returns a promise that resolves with an ArrayBuffer containing the entire contents of the blob as binary data.

Examples

Creating a blob

The Blob() constructor can 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'});

Creating a URL representing the contents of a typed array

The following code creates a JavaScript typed array and creates a new Blob containing the typed array's data. It then calls createObjectURL() to convert the blob into a URL.

HTML

<p>This example creates a typed array containing the ASCII codes
   for the space character through the letter Z, then converts it
   to an object URL. A link to open that object URL is created.
   Click the link to see the decoded object URL.</p>

JavaScript

The main piece of this code for example purposes is the typedArrayToURL() method, which creates a Blob from the given typed array and returns an object URL for it. Having converted the data into an object URL, it can be used in a number of ways, including as the value of the <img> element's src attribute (assuming the data contains an image, of course).

let typedArrayToURL = (typedArray, mimeType) => {
  return URL.createObjectURL(new Blob([typedArray.buffer], {type: mimeType}))
}

let bytes = new Uint8Array(59);

for (let i=0; i<59; i++) {
  bytes[i] = 32+i;
}

let url = typedArrayToURL(bytes, "text/plain");
let link = document.createElement("a");
link.href = url;
link.innerText = "Open the array URL";
document.body.appendChild(link);

Result

Click the link in the example to see the browser decode the object URL.

Extracting data from a Blob

One 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);

Another way to read content from a Blob is to use a Response. The following code reads the content of a Blob as text:

var text = await (new Response(blob)).text();

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

Obsolete: Creating blobs with BlobBuilder

Before the Blob() constructor was available, creating a new blob was performed using the BlobBuilder API, which is now deprecated and should no longer be used:

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

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 AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
BlobChrome Full support 5Edge Full support YesFirefox Full support 4IE Full support 10Opera Full support 11Safari Full support 5.1WebView Android Full support YesChrome Android Full support 18Firefox Android Full support 14Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
Blob() constructorChrome 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 Full support 37Chrome Android Full support 25Firefox 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 ?
arrayBuffer()Chrome Full support 76Edge No support NoFirefox Full support 69IE No support NoOpera No support NoSafari No support NoWebView Android Full support 76Chrome Android Full support 76Firefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
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 Full support 18Firefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
slice()Chrome Full support 21
Full support 21
No support 5 — 25
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Edge Full support 12Firefox Full support 13
Notes
Full support 13
Notes
Notes Prior to Firefox 12, 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 Implemented with the vendor prefix: moz
IE Full support 10Opera Full support 12Safari Full support 5.1
Prefixed
Full support 5.1
Prefixed
Prefixed Implemented with the vendor prefix: webkit
WebView Android Full support YesChrome Android Full support 25
Full support 25
No support 18 — 25
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Firefox Android Full support 14Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
stream()Chrome Full support 76Edge No support NoFirefox Full support 69IE No support NoOpera No support NoSafari No support NoWebView Android Full support 76Chrome Android Full support 76Firefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
text()Chrome Full support 76Edge No support NoFirefox Full support 69IE No support NoOpera No support NoSafari No support NoWebView Android Full support 76Chrome Android Full support 76Firefox 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 Full support 18Firefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
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