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
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.
Similar Reads
How can JavaScript upload a blob ? There are many ways to upload a blob (a group of bytes that holds the data stored in a file) in JavaScript, using XMLHttpRequest, Fetch API, jQuery. In this tutorial, we will discuss the two most common ways that are supported by a majority of the browsers.Note: To test our HTTP request, you can use
2 min read
What is a Blob Object in JavaScript ? In JavaScript, a Blob (Binary Large Object) is an object that represents raw binary data(collection of bytes). It is commonly used to handle and manipulate binary data, such as images, audio, video, or other types of files. The Blob object allows you to create, modify, and manipulate binary data in
2 min read
How to Convert JSON to Blob in JavaScript ? This article explores how to convert a JavaScript Object Notation (JSON) object into a Blob object in JavaScript. Blobs represent raw data, similar to files, and can be useful for various tasks like downloading or processing JSON data. What is JSON and Blob?JSON (JavaScript Object Notation): A light
2 min read
How to Convert Base64 to Blob in JavaScript? Working with files and data in web applications often involves dealing with binary data. One common scenario is converting a Base64 string into a Blob object, which can then be used in various ways, such as creating downloadable files or uploading images to a server. This article will guide you thro
4 min read
JavaScript ArrayBuffer Reference ArrayBuffer is used to represent a generic, fixed-length raw binary data buffer. The contents of an ArrayBuffer cannot be directly manipulated and can only be accessed through a DataView Object or one of the typed array objects. These Objects are used to read and write the contents of the buffer. Sy
2 min read
JavaScript BigUint64Array() Constructor The BigUint64Array() Constructor creates a new typed array of the 64-bit unsigned integers (BigInts). Typed arrays are a way to handle and manipulate binary data in a specific format. It allows to create arrays for storing large unsigned 64-bit integers. It is part of the JavaScript TypedArray objec
3 min read
How to Convert Blob Data to JSON in JavaScript ? When dealing with Blob data in JavaScript, such as binary data or files, we may need to convert it into JSON format for doing so JavaScript provides us with various methods as listed below. Table of Content Using FileReader APIUsing TextDecoder APIUsing FileReader APIIn this approach, we first use t
2 min read
How to Convert Base64 to File in JavaScript? In web development, Base64 encoding is often used to represent binary data, such as images or files, with a string of ASCII characters, sometimes you may be required to change this Base64 string back into a file for instance for file uploads, downloads, or processing in the browser, this article aim
2 min read
JavaScript arrayBuffer byteLength Property The Javascript arrayBuffer.byteLength is a property in JavaScript that return the length of an ArrayBuffer in a byte. ArrayBuffer is an object which is used to represent fixed-length binary data. Difference between property and function in javascript. Property in JavaScript is nothing but a value w
4 min read
JavaScript Heap Coding Practice Problems Heaps are an essential data structure in JavaScript used for efficiently managing priority-based tasks. A Heap is a specialized tree-based structure that allows for quick retrieval of the smallest or largest element, making it useful for priority queues, scheduling algorithms, and graph algorithms l
2 min read