What is a Blob in JavaScript and How to Use it?

In this article, we will explore what is a blob in JavaScript and how to use it.

Discover the power of JavaScript Blob, a flexible and useful tool for working with binary data.

Learn how to easily create and use data blobs in your web applications.

What is a blob in JavaScript?

A blob is a way to store data in JavaScript. It stands for Binary Large Object and can hold different types of data, like text or binary data.

In addition to that, JavaScript blob is a container for binary data, allowing you to store and manipulate files as raw data.

This adaptable entity proves especially valuable when managing substantial data portions or overseeing file uploads.

Blobs are useful when you need to work with large files, like images or videos, because they can store the data efficiently.

When to use blob in JavaScript

Blobs are often used when working with large files or when transferring data between different parts of an application.

For example, you might use a blob to store an image file that a user uploads to your website, or to store the contents of a text file that you want to download from a server.

You can also use blobs to create URLs representing the object using the URL.createObjectURL() method.

How to use blob in JavaScript?

Here are some examples of how to use a blob in JavaScript:

Creating a blob from a string

let blob = new Blob(["Hi, welcome to itsourcecode!"], {type: 'text/plain'});

The example code above shows how to create a new blob object from a string of text.

The blob constructor is used to create the blob object, and the text data is passed in as an array.

Creating a blob from a typed array and strings

let hello = new Uint8Array([72, 101, 108, 108, 111]); // "Hello" in binary form
let blob = new Blob([hello, ' ', 'world'], {type: 'text/plain'});

Here, our example code shows how to create a new Blob object from a combination of a typed array and strings.

The blob constructor is used to create the blob object, and the data is passed in as an array.

Creating a URL representing the contents of a blob

let blob = new Blob(["Hi, welcome to itsourcecode!"], {type: 'text/plain'});
let blobURL = URL.createObjectURL(blob);

This example shows how to create a URL that represents the contents of a blob object.

The URL.createObjectURL() method is used to create the URL, and the blob object is passed in as an argument.

Downloading a dynamically-generated blob with “Hi, Welcome to Itsourcecode!” contents as a file

<a download="example.txt" href='#' id="link">Download</a>
<script>
    let blob = new Blob(["Hi, Welcome to Itsourcecode!"], {type: 'text/plain'});
    link.href = URL.createObjectURL(blob);
</script>

This example shows how to create an HTML page with a link that, when clicked, will download a text file containing the text “Hi, Welcome to Itsourcecode!”

The blob constructor is used to create a new Blob object containing the text data, and the URL.createObjectURL() method is used to create a URL for the blob object.

This URL is set as the href attribute of an element, which allows the user to download the file when the link is clicked.

How to create blob URL in JavaScript?

You can create a URL for a Blob object in JavaScript using the URL.createObjectURL() method.

This method takes a blob object as input and returns a URL that represents the data stored in the blob.

For example, let’s say you have some text data that you want to store in a blob and create a URL for.

First, you would create a new blob object called sampleBlob that contains the text data from the sampleString and pass in the text data as an array.

Here’s an illustration of how to create a blob URL from a string:

const sampleString = "Hi, Welcome to Itsourcecode!";
const sampleBlob = new Blob([sampleString ], {type: 'text/plain'});
const sampleBlobURL = URL.createObjectURL(sampleBlob);

Then, you would use the URL.createObjectURL() method to create a URL for the sampleBlob object and store it in the sampleBlobURL variable.

You can use this URL to reference the data stored in the blob in different ways, like setting it as the source of an image or using it as a link.

Here’s the complete example:

<!Doctype html>
<body>
<!-- download attribute forces the browser to download instead of navigating -->
<a download=" Example.txt" href='#' id="link">Download</a>

<script>
const sampleString = "Hi, Welcome to Itsourcecode!";
const sampleBlob = new Blob([sampleString], {type: 'text/plain'});
const sampleBlobURL = URL.createObjectURL(sampleBlob);

link.href = sampleBlobURL;
</script>
</body>

Output:

Conclusion

In conclusion, this article has delved into the concept of a blob in JavaScript, which stands for Binary Large Object.

A blob serves as a versatile container for storing various types of data, both text and binary, much like a receptacle for substantial information.

This article has highlighted the practical utility of JavaScript Blobs, particularly when dealing with sizable data portions or handling file uploads.

We also emphasized the use cases for blobs, particularly in managing large files such as images or videos, and outlined how to create and manipulate blobs within JavaScript.

We are hoping that this article provides you with enough information that helps you understand the blob JavaScript. 

If you want to dive into more JavaScript topics, check out the following articles:

• JavaScript change text
• 2D array in JavaScript
• Length of an array in JavaScript 

Thank you for reading itsourcecoders 😊.

Caren Bautista

Technical Writer at PIES IT Solution

Responsible for crafting clear, well-structured, and beginner-friendly content across the platform. Handles the writing, proofreading, and editorial review of tutorials, guides, and documentation to ensure every article is accurate, readable, and easy to follow.

Expertise: Technical Writing · Content Creation · Documentation · Editorial Writing · JavaScript · TypeScript · Python · Python Errors · HTTP Errors · MS Excel  · View all posts by Caren Bautista →