Scribd
Upload
15 views4 pages

Blob in JavaScript

A Blob in JavaScript is a data container that holds raw binary data, such as files, images, or text, and can be created using the Blob constructor. Blobs can be downloaded, uploaded, previewed, and converted into files or URLs, and they are part of the Web APIs in modern browsers. While not natively supported in Node.js until version 15, newer versions allow the use of Blob, and earlier versions can utilize Buffer for binary data handling.

Uploaded by

hemakruthikphotos
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
15 views4 pages

Blob in JavaScript

A Blob in JavaScript is a data container that holds raw binary data, such as files, images, or text, and can be created using the Blob constructor. Blobs can be downloaded, uploaded, previewed, and converted into files or URLs, and they are part of the Web APIs in modern browsers. While not natively supported in Node.js until version 15, newer versions allow the use of Blob, and earlier versions can utilize Buffer for binary data handling.

Uploaded by

hemakruthikphotos
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

What is a Blob in JavaScript?

A Blob (Binary Large Object) is a data container that holds raw binary data — like
files, images, videos, or even text.
Think of a Blob as a chunk of data stored in memory that behaves like a file, but
lives entirely in JS.
const blob = new Blob(["Hello, world!"], { type: "text/plain" });
✅ You can:
 Download it
 Upload it
 Preview it
 Send it to a server
 Convert it into a File, URL, or stream

🧱 Syntax
new Blob(arrayOfParts, options);
Parameters:
 arrayOfParts: Array of strings, ArrayBuffers, or other Blobs
 options.type: MIME type (like text/plain, image/png, etc.)

🔹 Simple Example: Create a Text Blob


const blob = new Blob(["This is a test"], { type: "text/plain" });

🔁 Convert Blob to Downloadable File


const blob = new Blob(["Download this text"], { type: "text/plain" });
const url = URL.createObjectURL(blob);

// Create a download link


const link = document.createElement("a");
link.href = url;
link.download = "sample.txt";
link.click();

URL.revokeObjectURL(url); // Clean up
🔁 Read Blob Content
Option 1: FileReader
const blob = new Blob(["Hello from Blob"], { type: "text/plain" });

const reader = new FileReader();


reader.onload = () => {
console.log(reader.result); // "Hello from Blob"
};
reader.readAsText(blob);
Option 2: Response + text()
const blob = new Blob(["Blob to text"]);
const text = await new Response(blob).text();
console.log(text); // "Blob to text"

Use Case: Image Preview


const blob = new Blob([/* binary image data */], { type: "image/png" });
const url = URL.createObjectURL(blob);
document.getElementById("preview").src = url;

🎥 Use Case: Record Audio/Video


The browser’s MediaRecorder API returns a Blob:
mediaRecorder.ondataavailable = (event) => {
const recordedBlob = event.data;
// Save or preview the recording
};

🔄 Convert Blob to File


const blob = new Blob(["Hello File"]);
const file = new File([blob], "hello.txt", { type: "text/plain" });

🔥 Real-World Use Cases


Use Case Example

File download Convert string → Blob → download

Upload to server Send form with Blob or File

Image/video preview Use createObjectURL(blob)

Audio/video recording MediaRecorder API returns Blob

Save canvas or WebGL Export canvas as Blob

Export JSON or CSV Turn data into text Blob

Blob is part of vanilla JavaScript, but more specifically:


It’s part of the Web APIs provided by the browser environment, not part of the
ECMAScript core specification.
So it's not Node.js by default, but it is native in all modern browsers —
meaning you don’t need any library, framework, or extra tools to use it.
In Node.js?
 Node didn’t support Blob natively until v15+.
 But you can use:
o new Blob() in newer Node versions (18+ with ESM)
o Or use Buffer for raw binary handling in earlier versions

You might also like