To construct aBlob from 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 aBlob object for a file on the user's file system, see theFile documentation.

The APIs acceptingBlob objects are also listed in theFile documentation.

Blob()

Returns a newly createdBlob object 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 theBlob object.

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 anArrayBuffer containing the entire contents of theBlob as binary data.

Blob.bytes()

Returns a promise that resolves with anUint8Array containing the contents of theBlob.

Blob.slice()

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

Blob.stream()

Returns aReadableStream that can be used to read the contents of theBlob.

Blob.text()

Returns a promise that resolves with a string containing the entire contents of theBlob interpreted 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 example creates a JavaScripttyped array and creates a newBlob containing the typed array's data. It then callsURL.createObjectURL() to convert the blob into aURL.

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

The main piece of this code for example purposes is thetypedArrayToURL() function, which creates aBlob 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'ssrc attribute (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);}

One way to read content from aBlob is to use aFileReader. The following code reads the content of aBlob 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 aBlob is to use aResponse. The following code reads the content of aBlob as 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