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.
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.
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'});
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.
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.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.