Understanding what a Blob is

#javascript #blob

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 in the File API 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)

For example, if from the database or from protobuf, 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/

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

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:

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/

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

  anchorElement.click();
});