A blob object is simply a group of bytes that holds the data stored in a file. It may seem like that a blob is a reference to the actual file but actually it is not. A blob has its size and MIME just like that of a simple file. The blob data is stored in the memory or filesystem of a user depending on the browser features and size of the blob. A simple blob can be used anywhere we wish just like files.
The content of the blob can easily be read as ArrayBuffer which makes blobs very convenient to store the binary data.
Syntax for creating a Blob:
var 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:
var abc = new Blob(["GeeksForGeeks"], {type : "text/plain"}); var 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”:
<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:
<!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:
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.
