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}`);
})();

Result

Library





Discover More
Blob Url In Browser Address
Browser / Javascript - Object URL (createObjectURL / revokeObjectURL)

An ObjectUrl is the representation of blob object as a data URL strings that can be used with any fetch HTML element that accepts an URL as an attribute. HTML Example: This HTML was generated with...
Browser / Web Api - File (Blob)

A file in the Javascript Browser Api (WebApi) is represented by a File object . The file object is a blob object that adds support for files on the user's system. When you use a HTML input...
Html Input File Multiple Warning Dialog
How to handle files in Javascript with the File API of the Browser?

The file api is a browser javascript api that allows file system operation in the browser. FileApiopeneditsave Uploading a file: You can open and read files via the input of type file The...
URL - The data URL scheme

The data scheme is a scheme that can be used in a URL in order to embed (small) media resources data directly such as: images style sheets or any resource. The benefit is that there is no need...
Browser
Web Browser - Load Event

The load event is fired by the browser. at the Window when the document has finished loading at an fetch element that fetch a resource (e.g. img, embed) when its resource has finished loading as...
Undraw File Manager Re Ms29
What is a Blob (Binary Large Object) ?

blob stands for binary large object and represents the file content in binary data. Because in a computer, all data are binary data, this name is used logically to represent any file content where the...



Share this page:
Follow us:
Task Runner