What is a Blob
A Blob in normal life (according to Google's dictionary) is:
a drop of a thick liquid or viscous substance.
To understand this we have to dig a little deeper. Computer's work with binary data and this refers to data that is represented in a binary format. Basically 1 and 0. This binary format is a sequence of bits (binary digits) (these 1 and 0) and each bit represents the smallest unit of data storage in a computer system.
Computers need to do this because when you upload some file (image, word doc, pdf etc) to a Web Application, the computer needs to handle that raw data somehow and pass it around and send to different APIs etc. The file can be read (some file reading API) and its binary data can be obtained. This binary data can then be represented in a Blob which can then be used in many different APIs in your application. Super useful!
How to work with a Blob
In this example, we create a Blob using the new Blob() constructor, passing an array with the text content and specifying the MIME type as "text/plain". The resulting blob object can be used in various ways, such as downloading it as a file or passing it to other functions or APIs that expect a Blob.
If you hover over this Blob constructor in VsCode it gives the MDN reference definition:
If you goto the Blob interface you see this:
Digging Deeper into the Blob
We see here some really nice methods like - arrayBuffer and stream as well as some properties like size and type.
The arrayBuffer method is a method on the Blob object and it can be used to asynchronously read the contents of the Blob and return them as an ArrayBuffer object.
OK... great... but "what is an ArrayBuffer object?" I hear you say!
The stream method returns a ReadableStream which upon reading returns the data contained within the Blob.
That sounds cool right! This is the definition that Mozilla developer documentation gives. All great except ReadableStream which upon first reading sounds strange. Time to dig deeper again...
What is a ReadableStream?
A stream of data is can be something like data received over a network connection or data being read from a file. If this data is dealt with in a stream it allows for large amounts of data to be processed in chunks as it becomes available rather than loading the whole dataset into memory at once. It's all about efficiency!
Creating a Blob to Represent a File's Content
I always like to see things in practice. We have spoken about how Blobs can represent File Content but how would this actually look like in code? Below is an example:
In this example we can see that the FileReader API is being used. It is being used to read the uploaded file (to the input field) and obtain its binary data from `event.target.result`. This binary data is then passed to the Blob constructor which creates a Blob object.
What have we learnt?
We have learnt that Web Applications often deal with files (documents, images etc) and that they need a way to deal with that file data in order to be able to pass around the data to different APIs and maybe save the data to a database somewhere. One way they do this is through using a `Blob` (Binary Large Object) which help represent binary data, including file data, in a standardised way.
Many well known web APIs and browser features rely on Blobs for data handling. For instance, the File API, XMLHttpRequest, Fetch API, WebRTC, and the Media Recorder API all use Blobs to work with binary data. By using Blobs, you can seamlessly integrate with these APIs and leverage their functionalities.