The Blob
object 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
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()
constructor. To create a blob that contains a subset of another blob's data, use the slice()
method. To obtain a Blob
object for a file on the user's file system, see 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.prototype.size
Read only- The size, in bytes, of the data contained in the
Blob
object. Blob.prototype.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.prototype.arrayBuffer()
- Returns a promise that resolves with an
ArrayBuffer
containing the entire contents of theBlob
as binary data. Blob.prototype.slice()
- Returns a new
Blob
object containing the data in the specified range of bytes of the blob on which it's called. Blob.prototype.stream()
- Returns a
ReadableStream
that can be used to read the contents of theBlob
. Blob.prototype.text()
- Returns a promise that resolves with a
USVString
containing the entire contents of theBlob
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:
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 and creates a new Blob
containing the typed array's data. It then calls URL.createObjectURL()
to convert the blob into a 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>
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>
element's src
attribute (assuming the data contains an image, of course).
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);
Result
Click the link in the example to see the browser decode the object URL.
Extracting data from a blob
One way to read content from a Blob
is to use a FileReader
. The following code reads the content of a Blob
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 a Blob
is to use a Response
. The following code reads the content of a Blob
as text:
const text = await (new Response(blob)).text();
Or by using Blob.prototype.text()
:
const text = await blob.text();
By using other methods of FileReader
, it is possible to read the contents of a Blob as a string or a data URL.
Specifications
Specification | Status | Comment |
---|---|---|
File API The definition of 'The Blob interface' in that specification. |
Working Draft | Initial definition. |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Blob | Chrome Full support 5 | Edge Full support 12 | Firefox Full support 4 | IE Full support 10 | Opera Full support 11 | Safari Full support 5.1 | WebView Android Full support ≤37 | Chrome Android Full support 18 | Firefox Android Full support 14 | Opera Android Full support 11 | Safari iOS Full support 6 | Samsung Internet Android Full support 1.0 |
Blob() constructor | Chrome Full support 20 | Edge Full support 12 | Firefox
Full support
13
| IE Full support 10 | Opera Full support 12 | Safari Full support 8 | WebView Android Full support 37 | Chrome Android Full support 25 | Firefox Android
Full support
14
| Opera Android Full support 12 | Safari iOS Full support 8 | Samsung Internet Android Full support 1.5 |
arrayBuffer() | Chrome Full support 76 | Edge Full support 79 | Firefox Full support 69 | IE No support No | Opera No support No | Safari No support No | WebView Android Full support 76 | Chrome Android Full support 76 | Firefox Android No support No | Opera Android Full support 54 | Safari iOS No support No | Samsung Internet Android Full support 12.0 |
size | Chrome Full support 5 | Edge Full support 12 | Firefox Full support 4 | IE Full support 10 | Opera Full support 11 | Safari Full support 5.1 | WebView Android No support No | Chrome Android Full support 18 | Firefox Android No support No | Opera Android No support No | Safari iOS No support No | Samsung Internet Android Full support 1.0 |
slice() | Chrome
Full support
21
| Edge Full support 12 | Firefox
Full support
13
| IE Full support 10 | Opera Full support 12 | Safari
Full support
5.1
| WebView Android Full support Yes | Chrome Android
Full support
25
| Firefox Android Full support 14 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android
Full support
1.5
|
stream() | Chrome Full support 76 | Edge Full support 79 | Firefox Full support 69 | IE No support No | Opera No support No | Safari No support No | WebView Android Full support 76 | Chrome Android Full support 76 | Firefox Android No support No | Opera Android Full support 54 | Safari iOS No support No | Samsung Internet Android Full support 12.0 |
text() | Chrome Full support 76 | Edge Full support 79 | Firefox Full support 69 | IE No support No | Opera No support No | Safari No support No | WebView Android Full support 76 | Chrome Android Full support 76 | Firefox Android No support No | Opera Android Full support 54 | Safari iOS No support No | Samsung Internet Android Full support 12.0 |
type | Chrome Full support 5 | Edge Full support 12 | Firefox Full support 4 | IE Full support 10 | Opera Full support 11 | Safari Full support 5.1 | WebView Android No support No | Chrome Android Full support 18 | Firefox Android No support No | Opera Android No support No | Safari iOS No support No | Samsung Internet Android Full support 1.0 |
Legend
- Full support
- Full support
- No support
- No support
- See implementation notes.
- See implementation notes.
- Requires a vendor prefix or different name for use.
- Requires a vendor prefix or different name for use.