How to use blob object in JavaScript?

Taimoor Sattar

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://.

About the Author

Written by Taimoor Sattar I'm Taimoor Sattar, full-stack developer. I've experience to develop websites in JavaScript, Node and CSS. But, better I am a problem solver. I used to break down large chunck of problem into small puzzle pieces. You should follow them on Twitter. You can contact me on this page.