ve format.
The [ ` File ` ](/en-US/docs/Web/API/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() ` ](/en-US/docs/Web/API/Blob/Blob "Blob\(\)") constructor. To create a
blob that contains a subset of another blob's data, use the [ ` slice() `
](/en-US/docs/Web/API/Blob/slice "slice\(\)") method. To obtain a ` Blob `
object for a file on the user's file system, see the [ ` File ` ](/en-
US/docs/Web/API/File) documentation.

The APIs accepting ` Blob ` objects are also listed in the [ ` File ` ](/en-
US/docs/Web/API/File) documentation.

##  Constructor

[ ` Blob() ` ](/en-US/docs/Web/API/Blob/Blob "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 ` ](/en-US/docs/Web/API/Blob/size) Read only

    

The size, in bytes, of the data contained in the ` Blob ` object.

[ ` Blob.type ` ](/en-US/docs/Web/API/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() ` ](/en-US/docs/Web/API/Blob/arrayBuffer)

    

Returns a promise that resolves with an [ ` ArrayBuffer ` ](/en-
US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) containing the
entire contents of the ` Blob ` as binary data.

[ ` Blob.slice() ` ](/en-US/docs/Web/API/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() ` ](/en-US/docs/Web/API/Blob/stream)

    

Returns a [ ` ReadableStream ` ](/en-US/docs/Web/API/ReadableStream) that can
be used to read the contents of the ` Blob ` .

[ ` Blob.text() ` ](/en-US/docs/Web/API/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() ` ](/en-US/docs/Web/API/Blob/Blob "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 code creates a JavaScript [ typed array ](/en-
US/docs/Web/JavaScript/Guide/Typed_arrays) and creates a new ` Blob `
containing the typed array's data. It then calls [ ` URL.createObjectURL() `
](/en-US/docs/Web/API/URL/createObjectURL_static "URL.createObjectURL\(\)") to
convert the blob into a [ URL ](/en-US/docs/Glossary/URL) .

####  HTML

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> ` ](/en-
US/docs/Web/HTML/Element/img) element's [ ` src ` ](/en-
US/docs/Web/HTML/Element/img#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 = "";
        con