{{APIRef("File API")}}
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.
An easy way to construct a Blob is by invoking the {{domxref("Blob.Blob", "Blob()")}} constructor. Another way is to use the slice() method to create a blob that contains a subset of another blob's data.
Constructor
- {{domxref("Blob.Blob", "Blob(blobParts[, options])")}}
- Returns a newly created
Blobobject whose content consists of the concatenation of the array of values given in parameter.
Properties
- {{domxref("Blob.isClosed")}} {{readonlyinline}}
- A boolean value, indicating whether the {{domxref("Blob.close()")}} method has been called on the blob. Closed blobs can not be read.
- {{domxref("Blob.size")}} {{readonlyinline}}
- The size, in bytes, of the data contained in the
Blobobject. - {{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.close()")}}
- Closes the blob object, possibly freeing underlying resources.
- {{domxref("Blob.slice()", "Blob.slice([start[, end[, contentType]]])")}}
- Returns a new
Blobobject containing the data in the specified range of bytes of the sourceBlob.
Examples
Blob constructor example usage
The following code:
var aFileParts = ['<a id="a"><b id="b">hey!</b></a>'];
var oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // the blob
is equivalent to:
var oBuilder = new BlobBuilder();
var aFileParts = ['<a id="a"><b id="b">hey!</b></a>'];
oBuilder.append(aFileParts[0]);
var oMyBlob = oBuilder.getBlob('text/xml'); // the blob
The {{domxref("BlobBuilder")}} interface offers another way to create Blobs, but is now deprecated and should no longer be used.
Example for creating a URL to a typed array using a blob
The following code:
var typedArray = GetTheTypedArraySomehow();
var blob = new Blob([typedArray], {type: 'application/octet-binary'}); // 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
The only 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);
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. |
Browser compatibility
{{CompatibilityTable}}
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Basic support | 5[1] | 4[2] | 10 | 11.10[1] | 5.1[1] |
slice() |
10 {{property_prefix("webkit")}} 21 |
5 {{property_prefix("moz")}}[3] 13 |
10 | 12 | 5.1 {{property_prefix("webkit")}} |
Blob() constructor |
20 | {{CompatGeckoDesktop("13.0")}} | 10 | 12.10 | 6 |
close() and isClosed |
{{CompatUnknown}} | {{CompatNo}} {{bug("1048325")}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | {{CompatUnknown}} | {{CompatGeckoMobile("13.0")}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
slice() |
{{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
Blob() constructor |
{{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
close() and isClosed |
{{CompatUnknown}} | {{CompatNo}} {{bug("1048325")}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
[1] A version of slice() taking the length as second argument was implemented in WebKit and Opera 11.10. However, since that syntax differed from {{jsxref("Array/slice", "Array.slice()")}} and {{jsxref("String/slice", "String.slice()")}}, WebKit removed support and added support for the new syntax as Blob.webkitSlice().
[2] A version of slice() taking the length as second argument was implemented in Firefox 4. However, since that syntax differed from {{jsxref("Array/slice", "Array.slice()")}} and {{jsxref("String/slice", "String.slice()")}}, Gecko removed support and added support for the new syntax as mozSlice().
[3] Prior to Gecko 12.0 {{geckoRelease("12.0")}}, there was a bug that affected the behavior of slice(); it did not work for start and end positions outside the range of signed 64-bit values; it has now been fixed to support unsigned 64-bit values.
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.
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.Gecko notes: availability in privileged code
To use from chrome code, JSM and Bootstrap scope, you have to import it like this:
Cu.importGlobalProperties(['Blob']);
Blob is available in Worker scopes.
See also
- {{domxref("BlobBuilder")}}
- {{domxref("File")}}
- {{domxref("URL.createObjectURL")}}
- Components.utils.importGlobalProperties