Web/API/Blob

The Blob object represents a blob, which is 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.

Instance properties

Blob.prototype.size Read only: The size, in bytes, of the data contained in the Blob object.
Blob.prototype.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.

Instance methods

Blob.prototype.arrayBuffer(): Returns a promise that resolves with an ArrayBuffer containing the entire contents of the Blob as binary data.
Blob.prototype.slice(): Returns a new Blob object containing the data in the specified range of bytes of the blob on which it's called.
Blob.prototype.stream(): Returns a ReadableStream that can be used to read the contents of the Blob.
Blob.prototype.text(): Returns a promise that resolves with a USVString containing the entire contents of the Blob interpreted as UTF-8 text.

Examples

Creating a blob

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

const obj = {hello: 'world'};
const blob = new Blob([JSON.stringify(obj, 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 URL.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() function, 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).

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

const bytes = new Uint8Array(59);

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

const url = typedArrayToURL(bytes, 'text/plain');

const 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:

const reader = new FileReader();
reader.addEventListener('loadend', () => {
   // 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:

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

Or by using Blob.prototype.text():

const text = await 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.

Specifications

Specification	Status	Comment
File APIThe definition of 'The `Blob` interface' in that specification.	Working Draft	Initial definition.

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`Blob`	Chrome Full support 5	Edge Full support 12	Firefox Full support 4	IE Full support 10	Opera Full support 11	Safari Full support 5.1	WebView Android Full support ≤37	Chrome Android Full support 18	Firefox Android Full support 14	Opera Android Full support 11	Safari iOS Full support 6	Samsung Internet Android Full support 1.0
`Blob()` constructor	Chrome Full support 20	Edge Full support 12	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 10	Opera Full support 12	Safari Full support 8	WebView Android Full support 37	Chrome Android Full support 25	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 Full support 12	Safari iOS Full support 8	Samsung Internet Android Full support 1.5
`arrayBuffer()`	Chrome Full support 76	Edge Full support 79	Firefox Full support 69	IE No support No	Opera No support No	Safari No support No	WebView Android Full support 76	Chrome Android Full support 76	Firefox Android No support No	Opera Android Full support 54	Safari iOS No support No	Samsung Internet Android Full support 12.0
`size`	Chrome Full support 5	Edge Full support 12	Firefox Full support 4	IE Full support 10	Opera Full support 11	Safari Full support 5.1	WebView Android No support No	Chrome Android Full support 18	Firefox Android No support No	Opera Android No support No	Safari iOS No support No	Samsung Internet Android Full support 1.0
`slice()`	Chrome Full support 21 Full support 21 No support 5 — 25 Prefixed' Prefixed' Implemented with the vendor prefix: webkit	Edge Full support 12	Firefox 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 10	Opera Full support 12	Safari Full support 5.1 Prefixed' Full support 5.1 Prefixed' Prefixed' Implemented with the vendor prefix: webkit	WebView Android Full support Yes	Chrome Android Full support 25 Full support 25 No support 18 — 25 Prefixed' Prefixed' Implemented with the vendor prefix: webkit	Firefox Android Full support 14	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support 1.5 Full support 1.5 No support 1.0 — 1.5 Prefixed' Prefixed' Implemented with the vendor prefix: webkit
`stream()`	Chrome Full support 76	Edge Full support 79	Firefox Full support 69	IE No support No	Opera No support No	Safari No support No	WebView Android Full support 76	Chrome Android Full support 76	Firefox Android No support No	Opera Android Full support 54	Safari iOS No support No	Samsung Internet Android Full support 12.0
`text()`	Chrome Full support 76	Edge Full support 79	Firefox Full support 69	IE No support No	Opera No support No	Safari No support No	WebView Android Full support 76	Chrome Android Full support 76	Firefox Android No support No	Opera Android Full support 54	Safari iOS No support No	Samsung Internet Android Full support 12.0
`type`	Chrome Full support 5	Edge Full support 12	Firefox Full support 4	IE Full support 10	Opera Full support 11	Safari Full support 5.1	WebView Android No support No	Chrome Android Full support 18	Firefox Android No support No	Opera Android No support No	Safari iOS No support No	Samsung Internet Android Full support 1.0

Legend

Full support: Full support
No support: No support
See implementation notes.': See implementation notes.
Requires a vendor prefix or different name for use.': Requires a vendor prefix or different name for use.