HTML

Structure of content on the web

  • Web APIs

    Interfaces for building web applications

  • Learn
  • HTTP Observatory

    Scan a website for free

  • Web APIs
  • Blob()
  • Instance properties
    1. bytes()
    2. File
    3. URL.createObjectURL
    4. Web Workers.

    • The Blob interface 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 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.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.

    Instance methods

    Blob.arrayBuffer()

    Returns a promise that resolves with an ArrayBuffer containing the entire contents of the Blob as binary data.

    Blob.bytes()

    Returns a promise that resolves with an Uint8Array containing the contents of the Blob.

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

    js
    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 example creates a JavaScript 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>

    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 src attribute (assuming the data contains an image, of course).

    js
    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);
}