JavaScript Blob

Last Updated : 15 Oct, 2024

A Blob object represents a collection of binary data stored as a file. Unlike a mere reference to a file, a blob possesses its own size and MIME type, similar to regular files.

Depending on the browser’s capabilities and the blob’s size, this data can be stored either in the memory or filesystem of the user. Blobs can be utilized in various applications, functioning like files.

Moreover, the content of a blob can be easily read as an ArrayBuffer, making blobs a practical choice for managing and storing binary data in web development.

Syntax:

let abc = new Blob(["Blob Content"], 
    {type: Blob Property containing MIME property})

Apart from inserting data directly into Blob, we can also read data from this Blob using the FileReader class:

javascript

let abc = new Blob(["GeeksForGeeks"], 
                {type : "text/plain"});
let def = new FileReader();
def.addEventListener("loadend", function(e) {
    document.getElementById("para").innerHTML
                     = e.srcElement.result;
});

def.readAsText(abc);

In HTML file, we just create a simple <p> element with id=”para”:

html

<p id="para"></p>

And you will get the below output:

GeeksForGeeks

Blob URL’s:

Just like we have file URLs that refer to some real files in the local filesystem, we also have Blob URLs that refer to the Blob. Blob URL’s are quite similar to any regular URL’s and hence can be used almost anywhere that we can use the general URL’s. A Blob can be easily used as an URL for <a>, <img> or other tags, to display its contents. The blob URL pointing towards a blob can be obtained using the createObjectURL object:

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        JavaScript Blob
    </title>
</head>

<body>
    <a download="gfg.txt" href='#'
        id="link">Download</a>

    <script>
        let abc = new Blob(["Geeks For Geeks"],
                { type: 'text/plain' });

        link.href = URL.createObjectURL(abc);
    </script>
</body>

</html>

Output: You will be getting a downloaded dynamically generated Blob with Geeks For Geeks as its content:

Blob To ArrayBuffer:

The Blob constructor can be used to create blobs from anything including any type of BufferSource. For low-level processing, we can use the lowest level ArrayBuffer from the blob using FileReader:

javascript

let def = new FileReader();

def.readAsArrayBuffer(abc);

def.onload = function(event) {
    let res = def.result;
};

Positive points for using Blobs:

Blobs are a good option for adding large binary data files to a database and can be easily referenced.
It is easy to set access rights using rights management while using Blobs.
Database backups of Blobs contain all the data.

Negative points for using Blobs:

Not all databases permit the use of Blobs.
Blobs are inefficient due to the amount of disk space required and access time.
Creating backups is highly time consuming due to the file size of Blobs.

How can JavaScript upload a blob ?

Slash_IT

Improve

Article Tags :

JavaScript Blob

Syntax:

Blob URL’s:

Blob To ArrayBuffer:

Positive points for using Blobs:

Negative points for using Blobs:

Similar Reads

Thank You!

What kind of Experience do you want to share?