What are Blobs used for in JavaScript?

<Andrew Rymaruk />
Oct 30 · 3 min read

Blobs are a fundamental data type to understand.

Blob means “Binary Large Object” and it’s an opaque representation of a chunk of bytes. Web Browsers implement a Blob object, which is responsible for holding data.

Blobs are used for many things.

  • They can be created from content from the network.
  • They can be saved to disk or read from a disk.
  • They are the underlying data structure for File used in the FileReader API, for example.

A Blob has its size and MIME type just like a file has. Blob data is stored in the memory or filesystem depending on the browser and blob size. A Blob can be used like a file wherever we use files.

Most APIs for working with blobs are asynchronous.

But synchronous versions of APIs are also available so that they can be used in WebWorkers.

Content of a blob can be read as ArrayBuffer and therefore it makes blobs very handy to store binary data. Basically ArrayBuffer is used to keep binary data. It can be the binary data of an image for example. In other languages, buffers are proved very useful. 🙂 Yes, of course, it is a little difficult to understand or use than other data types.


Creating a Blob

A blob can be created using:

  • the Blob() constructor
  • another blob, using the Blob.slice() instance method

The constructor takes an array of values. Even if you have just one string to put in the blob, you must wrap it in an array.

When you call slice() you can retrieve a part of the blob.

Once you have a Blob object, you can access its 2 properties:

  • size returns the length in bytes of the content of the blob
  • type the MIME type associated with it

Blob URLs

As we have file:// URLs, referencing to a real file in a local filesystem. Similarly, we have blob:// URLs referencing to a blob. blob:// URLs can be used almost wherever we use regular URLs.

A blob:// URL to a blob can be obtained using the createObjectURL object.

The URL.createObjectURL() the static method creates a DOMString containing a URL representing the object given in the parameter.

A DOMString containing an object URL that can be used to reference the contents of the specified source object.

Each time you call createObjectURL(), a new object URL is created, even if you've already created one for the same object.


File Interface

A File object in JavaScript references an actual file in the local filesystem. This File object inherits all properties and methods from the Blob class. Although the File objects and Blob objects are different, they expose the same methods and properties.

There is no way to create a File object, some JavaScript API return references File objects.

File objects can be retrieved from a FileList object returned as a result of a user selecting files using the <input> element or from a drag and drop operation’s DataTransfer object.


Conclusion

Blobs are very useful while working with binary remote files.

A blob can be very large i.e., can contain audio and video data too. They can be created dynamically and using blob URLs can be used as files. You can use them in many different ways to make them more useful.

🙂 Thanks for reading.


JavaScript in Plain English

Learn the web's most important programming language.

<Andrew Rymaruk />

Written by

✅ CIW JavaScript Specialist 🚀I love JS programming and coffee ☕ I'm ready for the next challenge ;) http://rymaruk.com

JavaScript in Plain English

Learn the web's most important programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade