Understanding and Using BLOBs in Your Application (Part II)
In part-I of this series, we jumped straight into a big blob of … BLOBs. That was quite a journey! In part-II of this series, we will talk about why and where to use BLOBS.
Just a quick refresher course on blobs:
- BLOB is an acronym for Binary Large Object.
- BLOBS are huge chunks of raw binary data.
- A BLOB can be made of several other “constituent” BLOBs.
- A BLOB can be accessed via a special URL called a BLOB URL.
When we talked of blobs, we learned that blobs are binary representation of any and all kinds of data: plain text, array of characters, integers, images (all extensions), audio/video (all extensions). So think about it this way, if we had a .doc file, and all of the data in that .doc file were to be represented in raw binary format, we would have a … BLOB.
However, the way we access a blob is different from the way we normally access a file. Blobs don’t have a file path or a file system to reference the blob. Rather, they use blob-URLs. A blob URL is a special URL which is nothing but a pointer to the blob. Below is an example which uses blob URL to reference an image file:
To proceed from here, we will examine the code snippet above and analyse where can blobs and blob URLs be of use. Our code-snippet is an HTML document, which lets a user select an image file from their computer, and as soon as the user selects an image from their local file system, a JavaScript function is triggered which would display the selected image on the screen without requiring any server-side-rendering. This feature is called ‘Preview’ which allow users to look at the image before it is sent for further processing. Until an image-file is chosen by the user, we do not have a value for the ‘src’ tag of <img>. Additionally, HTML loads our DOM synchronously, so we cannot wait for the image to be selected, and then render the img tag. Do not fret, we have a very simple solution available to use. Let us explore each steps and begin by extracting the file resource from the DOM:
var file = input.files[0]Th ‘file’ var here will return a File Object, which essentially is a blob with some extra properties (lastModified, name, lastModifiedDate, webkitRelativePath). Aside from these extra properties, a blob and a file object share the same methods and properties. We can, therefore, create a blob-url for our file variable. Here is what the workflow looks like:
- Using HTML forms, we allow users to choose a file
- Once the file is chosen, an event-listener listening for any changes in the input field will trigger a function.
- Within this function, we will extract the file-object (which is a blob-like representation of our file) and store it in a variable (here named ‘file’).
- Next, we will call URL.createObjectURL(file) which will return a blob-URL representing the object passed to this function as a parameter (here, this will be our file object). This function call will return a blob URL looking somewhat like this: blob:http://hostname/{36-char-long-hex-string}
- Now that we have access to the URL which represents the file user chose in the form, we can set the src tag of <img> to be equal to the blob url.
document.querySelector(‘img’).src = urlThe word ‘blob’ in front of a blob URL tells our front-end server that this url represents a blob. Our super-smart machines extract the image from raw-data and displays it on the screen.
NOTE: The URL.createObjectURL() accepts a file object or a blob as its parameter, and returns a blob-URL. This URL is local to the server hosting our application: If we try to access this URL from a different browser, or a different network, we will get an access-restricted error. Also, a new blob URL is created every time we call this function. So if a user refreshes their browser, they will get a new URL which will point to the blob. The URL which was used prior will no longer be valid.
VOILA! We used File Objects (BLOB-like objects) and blob-URLs to allow users to preview a chosen image without the need to talk with our back-end servers. The cool thing is, it was all done flawlessly and did not require a lot of code. For some fun, copy this html file on your computer and give it a try.
Blobs proved to be a great way to tweak components in our DOM after it has been loaded. But the greatest advantage of using blobs is the vast amount of all data types it can represent. A LONGBLOB can hold upto 4 GB of data!! Blobs are one of the most efficient ways of sending large data files in a secure manner.
GEE! That was a lot of information. In the next (and last) part of this series, we will use a microphone to record user audio. The recorded audio will be available to us as a blob rather an audio-file. I want users to preview this audio before sending to the back-end servers. How do we get around previewing audio? In the back-end, user-audio will get processed and converted to text (with some smart NLP analysis on the audio). How do we actually send an audio file to the back-end for processing?This will be part of a smart speech-to-text and text analysis service. Some very interesting questions to answer. Find it all in the next story!
For the next part, I will be using React.JS for the Front-End and Node.JS for the Back-End. For NLP analysis and speech-to-text, I will be using IBM Watson’s Speech-to-Text helper-libraries.
Read more about Blobs at:
