How to manipulate a Binary large object (BLOB) with Javascript?
About
The blob object 1) is a data container for blob content
This is the API to work with binary data in the browser and is widely supported
Usage
Works with file
Because any type of data is a blob, you can work with images, sound, and video inside the browser. Just upload any file and work with it as a Blob.
Storage
Once you have a Blob object, you can make it available offline by storing it within the browser.
Render in HTML element
You can use it in any fetch html element such as a, img, … with a ObjectUrl
Steps by steps
Creation
Example for a plain text object where the type is the mime
let textBlob = new Blob(
["the text content for my bloc"],
{
type: 'text/plain'
}
);
Read
Reading a blob is an async operation that can be done with several APIs.
With the blob interface
With the en-US/docs/Web/API/Blob interface
(async () => {
let text = await textBlob.text();
console.log(`Result from Blob Interface ${text}`);
})();
With a file reader
With a en-US/docs/Web/API/FileReader and the load event
var reader = new FileReader();
reader.readAsText(textBlob);
reader.addEventListener("load", () => {
console.log(`Result from file reader ${reader.result}`);
}, false);
With a response object
(async () => {
let text = await (new Response(textBlob)).text();
console.log(`Result from Response ${text}`);
})();