JavaScript Blob

Blobs are immutable objects that represent unprocessed data. The file is a Blob derived from data from the file system. Blobs allow us to create file-like objects on the client that we may transfer to APIs, and these APIs expect URLs rather than needing the server to provide the file. In this article, we are going to discuss the JavaScript Blob with some examples.

What is a JavaScript Blob?

A blob object is simply a collection of bytes that contains data stored in a file. A blob may appear to be a reference to the actual file, but it is not. A blob has the same size and MIME as a simple file. The blob data is stored in the user's memory, and it depends on the browser functions and the blob's size. The file is a derivation of the blob, and it may be used in the same places where the file is used. Blobs are very useful for storing binary data because their content can be easily read as an ArrayBuffer.

Blobs can be stored in the memory or on disk by the web browser, and they can represent truly massive bits of data that are too large to fit in the main memory unless first separated into smaller pieces with the slice () method.

The syntax for creating a blob:

The syntax for creating a JavaScript blob may be defined as:

In this syntax,

Blobparts: It is an array of Blob, BufferSource, and string values.
Options: It is an optional object.
Type: It is a Blob type, generally MIME-type like image.png.

Example:

Let's take an example to understand how to create a JavaScript blob in the program.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript Blob</title>
</head>
<body>
    <p id="main"></p>
    <script>
var abc = new Blob(["Javatpoint"], 
{type : "text/plain"});
var def = new FileReader();
def.addEventListener("loadend", function(e) {
document.getElementById("main").innerHTML
     = e.srcElement.result;
});
def.readAsText(abc);
</script>
</body>
</html>

Output: After executing this code, we will get the output as shown below in the screenshot.

In this program, we just make a simple <p> element with id = "main".

Blob Object

The blob object is used to represent an immutable blob object that represents raw data. The blob, like a file, has a size and mime-type property.

Example:

Let's take an example to understand how we can create a blob object in the JavaScript.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript Blob</title>
<style>
   body {
      font-family: "Tahoma", Verdana;
   }
   .result{
      font-size: 18px;
      font-weight: 500;
      color: red;
   }
</style>
</head>
<body>
<h1>Blob object in JavaScript</h1>
<div class="result"></div>
<button class="Btn">Click here</button>
<h3>Click on the button to make and show a JavaScript blob object</h3>
<script>
   let resEle = document.querySelector(".result");
   document.querySelector(".Btn").addEventListener("click", () => {
      let blob = new Blob(["JavaScrit blob is a sample blob"], { type: "text/plain" });
      resEle.innerHTML = "blob.type = " + blob.type + "<br>";
      resEle.innerHTML += "blob.size = " + blob.size;
   });
</script>
</body>
</html>

Output: After executing this code, we will get the output as shown below in the screenshot.

As we have seen, there is a "Click here" button. When we click on the "Click Here" button, it shows the result shown below in the screenshot.

JavaScript Blob URL's

We have Blob URLs that refer to the blob, same as we have file URLs that refer to actual files in the local filesystem. If blob URLs are similar to regular URLs, they can be used everywhere regular URLs can be used. A JavaScript blob may easily be used as a URL for <img> tag and other tags to display its contents. The createObjectURL object can be used to get the blob URL that points to a blob:

Example:

Let's take an example to understand how we can use the blob URL in the program.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript Blob</title>
</head>
<body>
    <a download="javatpoint.txt" href='#'
        id="link">Download file</a>
    <script>
        let abc = new Blob(["Javatpoint"],
                { type: 'text/plain' });
        link.href = URL.createObjectURL(abc);
</script>
</body>
</html>

Output: After executing this code, we will get the output as shown below in the screenshot.

Here, we can see there is a link. When we click on the link, a text file is a download from the link as shown below in the screenshot:

Blob to base64

Converting a Blob into a base64-encoded string is an alternative to URL.createObjectURL. This encoding protects binary data by encrypting it as a string of ultra-safe "readable" characters with ASCII codes ranging from 0 to 64. More importantly, this encoding can be used in "data-urls". To convert a Blob to base64, we'll use the built-in FileReader object.

A data URL has the following syntax:

Such URLs may be used anywhere, just like "regular" URLs.

Example:

Let's take an example to understand how we can use the blob to base64 in the JavaScript blob.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript Blob</title>
</head>
<body>
    <a download="javatpoint.txt" href='#'
    id="link">Download file</a>
    <script>
   let link = document.createElement('a');
link.download = 'hello.txt';
let blob = new Blob(['Hello, world!'], {type: 'text/plain'});
let reader = new FileReader();
reader.readAsDataURL(blob); 
reader.onload = function() {
  link.href = reader.result; // data url
  link.click();
};
    </script>
</body>
</html>

Output: After executing this code, we will get the output as shown below in the screenshot. When we execute the program, it directly downloads the file at run time.

Pros and Cons of JavaScript blob

There are some pros and cons of JavaScript Blob. Some of them are as follows:

Pros of JavaScript Blob

Blobs are a convenient way to store and reference massive binary data files in a database.
Blobs database backups contain all of the data.
When using Blobs, setting access rights is simple with rights management.

Cons of JavaScript Blob

Blobs are inefficient because of the amount of disk space they need and their time to access them.
All databases don't support blobs.
Due to the large file size of Blobs, creating backups takes a long time.

Next TopicCheck if the array is empty or null, or undefined in JavaScript

← prev next →