--- title: Blob slug: Web/API/Blob tags: - API - Files - NeedsMobileBrowserCompatibility - NeedsTranslation - Reference - TopicStub - WebAPI translation_of: Web/API/Blob ---

A Blob object represents a file-like object of immutable, raw data. Blobs represent data that isn't necessarily in a JavaScript-native format. The {{domxref("File")}} interface is based on Blob, inheriting blob functionality and expanding it to support files on the user's system.

To construct a Blob from other non-blob objects and data, use the {{domxref("Blob.Blob", "Blob()")}} constructor. To create a blob that contains a subset of another blob's data, use the {{domxref("Blob.slice()", "slice()")}} method. To obtain a Blob object for a file on the user's file system, see the {{domxref("File")}} documentation.

The APIs accepting Blob objects are also listed on the {{domxref("File")}} documentation.

Note: The slice() method had initially taken length as the second argument to indicate the number of bytes to copy into the new Blob. If you specified values such that start + length exceeded the size of the source Blob, the returned Blob contained data from the start index to the end of the source Blob.

Note: Be aware that the slice() method has vendor prefixes on some browsers and versions: blob.mozSlice() for Firefox 12 and earlier and blob.webkitSlice() in Safari. An old version of the slice() method, without vendor prefixes, had different semantics, and is obsolete. The support for blob.mozSlice() has been dropped with Firefox 30.

Constructor

{{domxref("Blob.Blob", "Blob(blobParts[, options])")}}: Returns a newly created Blob object whose content consists of the concatenation of the array of values given in parameter.

Properties

{{domxref("Blob.size")}} {{readonlyinline}}: The size, in bytes, of the data contained in the Blob object.
{{domxref("Blob.type")}} {{readonlyinline}}: A string indicating the MIME type of the data contained in the Blob. If the type is unknown, this string is empty.

Methods

{{domxref("Blob.slice()", "Blob.slice([start[, end[, contentType]]])")}}: Returns a new Blob object containing the data in the specified range of bytes of the source Blob.

Examples

Blob constructor example usage

The {{domxref("Blob.Blob", "Blob() constructor")}} allows one to create blobs from other objects. For example, to construct a blob from string:

var debug = {hello: "world"};
var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'});

Before the Blob constructor was available, this could be accomplished through the {{domxref("BlobBuilder")}} API, which is now deprecated:

var builder = new BlobBuilder();
var fileParts = ['<a id="a"><b id="b">hey!</b></a>'];
builder.append(fileParts[0]);
var myBlob = builder.getBlob('text/xml');

Example for creating a URL to a typed array using a blob

The following code:

var typedArray = GetTheTypedArraySomehow();
var blob = new Blob([typedArray.buffer], {type: 'application/octet-stream'}); // pass a useful mime type here
var url = URL.createObjectURL(blob);
// url will be something like: blob:d3958f5c-0777-0845-9dcf-2cb28783acaf
// now you can use the url in any context that regular URLs can be used in, for example img.src, etc.

Example for extracting data from a Blob

One way to read content from a Blob is to use a {{domxref("FileReader")}}. The following code reads the content of a Blob as a typed array:

var reader = new FileReader();
reader.addEventListener("loadend", function() {
   // reader.result contains the contents of blob as a typed array
});
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:

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

By using other methods of {{domxref("FileReader")}}, it is possible to read the contents of a Blob as a string or a data URL.

Specifications

Specification	Status	Comment
{{SpecName('File API','#blob','Blob')}}	{{Spec2('File API')}}	Initial definition