Understanding what a Blob is
Tags: javascript, blob
Published: 2021-05-08 22:44:03

There is a little bit of mystery of what a Blob is.

A Blob is a "B L OB" or "Binary Large Object".  It is as if it is a file.

It is [defined](https://w3c.github.io/FileAPI/#dfn-Blob) in the [File API](https://w3c.github.io/FileAPI) of the JS specs.  It has

- a series of immutable bytes
- a size
- an MIME type, such as `'image/jpeg'`, `'text/plain'`, `'text/csv'`, `'application/pdf'`,  or `'application/json'` ([some more examples](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types))

For example, if from the database or from [protobuf](https://developers.google.com/protocol-buffers), we can get an array of bytes, which is the byte dump of an image file, we can compose it back to a "file" which is like `my-awesome-file.jpg`.

In JavaScript Definitive Guide. 7th ed, p. 522, it is said that the file may actually be saved on user's local hard drive, and the JavaScript can still access the Blob.

We can look at an example:

https://jsfiddle.net/KennethLum/9L51my3b/

```js
const arr = [
  // ...
];

const arrUint8 = new Uint8Array(arr);

const blob = new Blob([arrUint8], {
  type: 'image/jpeg',
});

const url = URL.createObjectURL(blob);

document.querySelector('#my-image').src = url;
```

`arr` is a regular JavaScript array, and its content is not listed above but is in the JSFiddle example.

It is first converted to a "typed array", which is an array similar to the low level memory block when a C program is written. (think `malloc`).

It is then converted to a "blob", and it is as if it is a file.  Then how can we access this file?  One way is to get a URL for it, and that's what the line

```js
url = URL.createObjectURL(blob);
```

is for.  The URL may appear like

```
blob:https://fiddle.jshell.net/6631b3ce-ba72-41f1-bfb0-e498862a573d
```

and it is like, this URL is the address of a file.

Then in the above example, we just set the image element's `src` to point to that URL, and we can see the image.

## Letting the user automatically download the file

There is one more trick to automatically let the user download this file, which is the use the `<a>` tag. We set the `href` and the `download` attribute of the tag, and then use JavaScript to click on it:

```js
const imgElement = document.querySelector('#my-image');
const anchorElement = document.querySelector("#the-link");
imgElement.src = url;
anchorElement.href = url;
anchorElement.download = "my-awesome-image.jpg";

imgElement.addEventListener("load", () => {
  anchorElement.click();
});
```
Example: https://jsfiddle.net/KennethLum/t89xguf6/

And the file can be automatically downloaded for the user.  This can be useful, when some image is made (as a Blob or from Canvas), and then it is provided to the user as a download. For example, we could make a shipping label, or a discount coupon with the user's name on it, or it can be a `.csv` file with a stock's historical data in it, and then provide to the user as an image or as a PDF or `.csv` file.

In fact, the `<a>` element does not even need to be present on the page. It can be dynamically created:

Example: https://jsfiddle.net/KennethLum/gx6zu9ap/

```js
imgElement.addEventListener('load', () => {
  const anchorElement = document.createElement('a');
  anchorElement.href = url;
  anchorElement.download = 'my-awesome-image.jpg';

  anchorElement.click();
});
```