Blob

To construct aBlobfrom other non-blob objects and data, use theBlob()constructor. To create a blob that contains a subset of another blob's data, use theslice()method. To obtain aBlobobject for a file on the user's file system, see theFiledocumentation.

The APIs acceptingBlobobjects are also listed in theFiledocumentation.

Blob()

Returns a newly createdBlobobject which contains a concatenation of all of the data in the array passed into the constructor.

Blob.sizeRead only

The size, in bytes, of the data contained in theBlobobject.

Blob.typeRead only

A string indicating the MIME type of the data contained in theBlob.If the type is unknown, this string is empty.

Blob.arrayBuffer()

Returns a promise that resolves with anArrayBuffercontaining the entire contents of theBlobas binary data.

Blob.bytes()

Returns a promise that resolves with anUint8Arraycontaining the contents of theBlob.

Blob.slice()

Returns a newBlobobject containing the data in the specified range of bytes of the blob on which it's called.

Blob.stream()

Returns aReadableStreamthat can be used to read the contents of theBlob.

Blob.text()

Returns a promise that resolves with a string containing the entire contents of theBlobinterpreted as UTF-8 text.

TheBlob()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",
});

The following code creates a JavaScripttyped arrayand creates a newBlobcontaining the typed array's data. It then callsURL.createObjectURL()to convert the blob into aURL.

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 thetypedArrayToURL()function, which creates aBlobfrom 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'ssrcattribute (assuming the data contains an image, of course).

function showViewLiveResultButton() {
if (window.self!== window.top) {
// Ensure that if our document is in a frame, we get the user
// to first open it in its own tab or window. Otherwise, this
// example won't work.
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 aBlobis to use aFileReader.The following code reads the content of aBlobas 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 aBlobis to use aResponse.The following code reads the content of aBlobas text:

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

Or by usingBlob.text():

const text = await blob.text();

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

• FileReader
• File
• URL.createObjectURL()
• Using files from web applications