What the hell is a Blob in Javascript?!

What is a Blob

A Blob in normal life (according to Google's dictionary) is:

a drop of a thick liquid or viscous substance.

However, that is not what we are interested in here. In the Javascript world a Blob is a Binary Large Object and it represents a file-like object of raw data. It can be used to store and manipulate binary data, such as text, images, videos, or any other type of data. This is what ChatGPT told me. What the hell does that actually mean though?!

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

There is a Blob constructor that can be used in Javascript. Easy example:

const text = "Hello, world!";
const blob = new Blob([text], { type: "text/plain" });

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:

A file-like object of immutable, raw data. Blobs represent data that isn't necessarily in a JavaScript-native format. The File interface is based on Blob, inheriting blob functionality and expanding it to support files on the user's system.

If you goto the Blob interface you see this:

interface Blob {
    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Blob/size) */
    readonly size: number;
    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Blob/type) */
    readonly type: string;
    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Blob/arrayBuffer) */
    arrayBuffer(): Promise<ArrayBuffer>;
    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Blob/slice) */
    slice(start?: number, end?: number, contentType?: string): Blob;
    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Blob/stream) */
    stream(): ReadableStream<Uint8Array>;
    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Blob/text) */
    text(): Promise<string>;
}

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.

arrayBuffer

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 ArrayBuffer is a built-in JavaScript object that represents a fixed-length, binary data buffer.

So it essentially is a Javascript object that represents a region in memory used to hold binary data. So you use the arrayBuffer method on the Blob to return a Promise that resolves with the contents of the Blob as binary data.

stream

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?

In JavaScript, a ReadableStream is an interface provided by the Streams API, which is a standard part of the JavaScript language. The ReadableStream represents a source of data that can be read in a sequential and asynchronous manner.

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:

const fileInput = document.querySelector('input[type="file"]');
const file = fileInput.files[0];
const reader = new FileReader();

reader.onload = function(event) {
  const fileData = event.target.result; // Binary data of the file
  const blob = new Blob([fileData], { type: file.type });
  // Use the Blob object here
};

reader.readAsArrayBuffer(file);

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.

Blobs themselves do not convert file data into binary data. Instead, they are a way to represent and work with binary data, including file data, in JavaScript.

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.

Blobs provide a standardised way to work with binary data and simplify the process of working with files and raw data in JavaScript.