JavaScript Blob

Overview

JavaScript Blob is nothing but an immutable object which represents the unprocessed or raw data stored in a file. It is not a real file rather it is just the reference of the real file. Blobs are used to create objects on the client-side which are similar to a file that might be transferred to different APIs (Application Programming Interface), in the return, the APIs don't need the server to transfer the file rather they expect URLs. There are different high-level objects present in a browser and Blobs are one of them. Blobs are used in place of a file as files are the derivation of blobs. In this article, we will have a broader look at JavaScript Blob along with its examples, advantages, disadvantages, etc.

Before learning about JavaScript Blob, let's learn a bit about objects in JavaScript.

Objects in JavaScript are the building block of JavaScript and it is very much different from primitive data types of JS as they store data in a single value.

Objects in JS is a non-primitive data type that is used to store the collection of multiple data means an object is the unordered collection of key-value pairs in which each key-value pair is known as a property. Each property of an object in JS can be accessed by using the dot notation(.) or array notation ([]).

After having a basic overview of Objects in JavaScript, let's now learn about the JavaScript Blob.

Blobs also known as "Binary Large Object" are immutable objects which is a representation of raw data. It is a group of bytes representing the data stored in a file. JavaScript Blobs are high-level objects in a browser that can be read as text or binary data.

The size of the blob is the same as that of a simple file and the data stored inside the blob is stored in the user's memory which depends upon the functions of the browser and the size of the blob. They are very much useful to store binary data as binary data can be easily readable as an ArrayBuffer.

The storage of blobs in memory is done by the internet browser. Huge bits of data are represented by blob which is large enough to be accommodated in the main memory therefore, the bits of data have to be separated using the slice() function in JS.

Now, let's look at the syntax used to create a JavaScript blob.

Syntax

Parameter

In the above-given syntax, there are the following parameters:

Content of Blob- The content of the blob might contain two parts which are as follows:
- Blobparts- Blobparts represent an array of the Blob, the BufferSorce, and string type values.
- Options- This parameter is an optional object.
type- This parameter represents the blob property which contains MIME property.

Return Type

The JavaScript Blob returns a new Blob object which contains the data in bytes of a specified range when the blob object is invoked.

Example

Let's discuss an example to understand the concept of the blob in JavaScript and how the content of a blob is displayed in a web browser.

Code

Output Output-1

Explanation

In the above example, we have inserted the content directly into the blob object having type as plain/text. The content inside the blob object can be read using a class called the FileReader() class. Inside the <body> tag, we have created a paragraph tag (<p>) with id="main". After creating the paragraph tag, we created the blob object and inserted the content inside the blob object or file. The content of the blob can be seen in the web browser as seen on the output screen.

JavaScript Blob URLs

Similar to the file URLs which refer to some actual file in a local computer system, the Blob URLs are also URLs that refer to another blob object. Blob URLs are used as URLs to display or refer to the data or content of different HTML tags such as anchor tags (<a>), image tags (<img>), etc. A Blob URL is similar to that of a file URL and therefore it can be used everywhere a normal file URL can be used.

The Blob URL which points to another blob can be created using an Object called createObjectURL.

Now, let's understand the concept of JavaScript Blob URLs with properly implemented examples.

Code

Output(Before Clicking) Output-2

Output(After Clicking) Output-3

The .txt file is downloaded after clicking on the link

Output(Content of file) Output-4

Explanation

In the above HTML file, we have used the createObjectURL() method where the blob is passed as a parameter so that the created blob URL should point at a blob. Here, the blob URL is used to display the content of the anchor tag (<a>). The content will be downloaded and a dynamically generated Blob with Scaler Topics as the content will be displayed as the output.

Let's take another example where the file will be downloaded automatically once the URL hits.

Code

Output

The file is downloaded without clicking on any link once the URL hits Output-5

Content of the file

Output-6

Explanation

The above given example is the same as of previous one but here we have used the method URL.revokeObjectURL(). By using the URL.revokeObjectURL() method, we can internally remove the reference of the file and will let the Blob be deleted which eventually frees the memory occupied by the Blob.

JavaScript Blob to ArrayBuffer

Creation of blobs from any kind of BufferSource can be done by using the JavaScript blob constructor. The lowest level of ArrayBuffer from the blob can be used for low-level processing using the FileReader() class. The normal blob object will be converted into ArrayBuffer by using the method known as readAsArrayBuffer() where the JavaScript blob object is passed as an argument which can be seen in the below program.

Let's understand the concept with a properly implemented example,

Code

Explanation

In the above given example, we have taken the same piece of code used in the previous examples but here we have converted a blob object into ArrayBuffer by using the method readasArrayBuffer(). In the readasArrayBuffer() method, the blob object is passed as the parameter which ultimately gets converted into ArrayBuffer. The output displayed will be the same as seen in the previous examples.

After having a detailed explanation of JavaScript blob with properly implemented examples, let's now understand some advantages and disadvantages that blob possesses.

Advantages of Using JavaScript Blob

Let's discuss some of the advantages of JavaScript blob which are as follows,

Blobs are an easy way to store and add huge files containing binary data in a database and also the files can be referenced easily.
By using JavaScript Blobs, access rights can be easily mapped with proper management of rights.
The backup of the blob contains all the data of the blob database.
Blobs are not actual files rather they are references to an original file.

Disadvantages of Using JavaScript Blob

Now, let's discuss some of the disadvantages of JavaScript blob which are as follows,

The amount of memory needed by blobs is more because of the arraybuffer which makes them inefficient in terms of space management and the time taken to access the blobs.
The creation of backup takes a bit longer time when dealing with blob objects or blob files due to their larger size.
Blobs are not permitted to be used in all databases, which means certain databases support or allow JavaScript blobs.

Browser Compatibility

Following are the web browsers with versions from which they support JavaScript blob and its different methods or functions:

Browser	Chrome	Mozilla Firefox	Apple Safari	Microsoft Edge	Opera
Blob Support	Yes	Yes	Yes	Yes	Yes
Versions	5.0	4.0	6.0	12.0	11

Every listed browser has the support of JavaScript Blob along with its concerned methods.

FAQs

Let's discuss some of the frequently asked questions related to JavaScript Blob.

Q Why do we need BLOB in JavaScript?

A: Blobs are used to create objects on the client side that are similar to a file that might be transferred to different APIs (Application Programming Interface), in return the APIs don't need the server to transfer the file rather they expect URLs.

Q Where are BLOBs stored in JavaScript?

A: JavaScript blob is stored in the main memory or user's memory like any other ArrayBuffer or objects declared in the browser's window.

Q Is BLOB supported by all databases?

A: No, Blobs are not supported by all the databases that exist. They are only supported by Hash, Btree, and Heap databases.

Q Are blobs immutable?

A: Yes, JavaScript blobs are immutable objects which represent raw or unprocessed data. As we know, immutable data cannot change its structure or data inside it, therefore Immutability provides stability and control over the data which eventually makes code safer. Immutable objects give us the right to control data flow predictably so that changes can be discovered efficiently.

Conclusion

Blobs also known as "Binary Large Object" are immutable objects which is a representation of raw data.
JavaScript Blobs are high-level objects present in a browser that can be read as text or binary data.
Huge bits of data are represented by a blob which is large enough to be accommodated in the main memory, therefore, the bits of data have to be separated using the slice() function in JS.
Blobs are an easy way to store and add huge files containing binary data in a database and also the files can be referenced easily.
Blobs are not actual files rather they are references to an original file.
The amount of memory needed by blobs is more which makes them inefficient in terms of space management and the time taken to access the blobs.
Blobs are not permitted to be used in all databases, which means certain databases support or allow JavaScript blobs.
JavaScript blob is only supported by Hash, Btree, and Heap databases.
Blobs are used to create objects on the client-side which are similar to a file that might be transferred to different APIs (Application Programming Interface), in the return APIs don't need the server to transfer the file rather they expect URLs.