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 

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!

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

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:

We see here some really nice methods like - 

The arrayBuffer method is a method on the 

object and it can be used to asynchronously read the contents of the Blob and return them as an 

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 

 method on the Blob to return a Promise that resolves with the contents of the Blob as binary data.

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 

which upon first reading sounds strange. Time to dig deeper again...

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:

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.

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.

Discover the functionality and uses of Blobs in JavaScript! This blog post provides a clear concept of what a Blob is, how to use it, create, manipulate and process binary data in JavaScript, crucial for modern-day web applications. Perfect for beginners and experienced developers!

Hi, I'm Adam Drake

Latest Blog Post

What the hell is a Blob in Javascript?!

Skills