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