How to use blob object in JavaScript?

The blob object in javascript used to represent the raw data with different media types (MIME Type). We can use blob as a file system and can be store on the memory or browser depending on blob size.

The blob object is useful in different scenarios as below:

  • Create a temporary file that could be used to preview files before uploading to the server like image preview.
  • Download content on the website like create PDF from HTML content.

We can create a blob object using the Blob constructor. The blob constructor consists of two parts as below:

  • blobPart (representation of data in array type)
  • blob type (Mime Type e.g. media type)

You can define the blobType (media types) in blob constructor e.g. image/jpeg, text/html. You can view different media types at this page.

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

After the blob object is created, you have access to below two (2) properties:

  • Size
  • MIMEtype (Media type)

You can console.log the output as below:

console.log(blob.size)
console.log(blob.type)

We can create the URL representation of the blob using the below command in Javascript:

URL.createObjectURL(blob)

As the web page URL starts with https:// and the file URL starts with file://, the blob URL starts with blob://.

Image Preview

Thanks for reading the post.

If you want to learn how to build a full-stack subscription website, please check out my course.

If you find this post useful, please share it on your social platform to reach out to more people.

Share this Blog