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 string 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 showViewLiveResultButton() {
if (window.self !== window.top) {
const p = document.querySelector("p");
p.textContent = "";
const button = document.createElement("button");
button.textContent = "View live result of the example code above";
p.append(button);
button.addEventListener("click", () => window.open(location.href));
return true;
}
return false;
}
if (!showViewLiveResultButton()) {
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
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.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
Browser compatibility
|
Desktop |
Mobile |
|
Chrome |
Edge |
Firefox |
Internet Explorer |
Opera |
Safari |
WebView Android |
Chrome Android |
Firefox for Android |
Opera Android |
Safari on IOS |
Samsung Internet |
Blob |
20 |
12 |
13Before Firefox 16, the second parameter, when set to null or undefined , leads to an error instead of being handled as an empty dictionary. |
10IE10 throws InvalidStateError with a TypedArray argument. Consider using MSBuilder as an alternative. |
12 |
6 |
4.4 |
25 |
14Before Firefox 16, the second parameter, when set to null or undefined , leads to an error instead of being handled as an empty dictionary. |
12 |
6 |
1.5 |
Blob |
5 |
12 |
4 |
10 |
11 |
6 |
4.4 |
18 |
4 |
11 |
6 |
1.0 |
arrayBuffer |
76 |
79 |
69 |
No |
63 |
14 |
76 |
76 |
79 |
54 |
14 |
12.0 |
size |
5 |
12 |
4 |
10 |
11 |
6 |
4.4 |
18 |
4 |
11 |
6 |
1.0 |
slice |
215–25 |
12 |
13Before 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. 5–13 |
10 |
12 |
76–7 |
4.4 |
2518–25 |
14Before 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. 5–14 |
12 |
76–7 |
1.51.0–1.5 |
stream |
76 |
79 |
69 |
No |
63 |
14.1 |
76 |
76 |
79 |
54 |
14.5 |
12.0 |
text |
76 |
79 |
69 |
No |
63 |
14 |
76 |
76 |
79 |
54 |
14 |
12.0 |
type |
5 |
12 |
4 |
10 |
11 |
6 |
4.4 |
18 |
4 |
11 |
6 |
1.0 |
See also