How to manipulate a Binary large object (BLOB) with Javascript?

About

The blob object ¹⁾ 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

• With a response object ²⁾ from the fetch Api. The syntax below is a async IIFE (function)

(async  () => {
    let text = await (new Response(textBlob)).text();
    console.log(`Result from Response ${text}`);
})();

Result

Library

• blob-util