BlobBuilder vs New Blob Constructor: Key Differences & How to Convert Your JavaScript Code

Table of Contents#

1. What is BlobBuilder?
2. What is the New Blob Constructor?
3. Key Differences Between BlobBuilder and Blob Constructor
   • Syntax
   • Browser Support
   • Status and Maintenance
   • Data Handling
   • Options and Configuration
4. How to Convert BlobBuilder Code to the Blob Constructor
   • Step 1: Identify BlobBuilder Instances
   • Step 2: Replace append() with an Array of Data Parts
   • Step 3: Migrate Type and Options
   • Example Conversion
5. Common Use Cases for Blobs
   • Creating Downloadable Files
   • Processing Canvas Images
   • Handling FormData
6. Conclusion
7. References

What is BlobBuilder?#

BlobBuilder was an early API designed to create Blobs incrementally by appending data chunks (strings, ArrayBuffers, or other Blobs) and then finalizing the Blob with a specified MIME type. It was part of the initial File API drafts but was never standardized and was eventually deprecated.

Key Characteristics:#

• Incremental Construction: Used methods like append() to add data in chunks.
• Vendor Prefixes: Implemented with prefixes like WebKitBlobBuilder (Chrome/Safari) or MozBlobBuilder (Firefox) due to lack of standardization.
• Finalization Step: Required calling getBlob(type) to generate the final Blob object, where type specified the MIME type.

Example Code (Legacy):#

// Check for vendor-prefixed BlobBuilder
var BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder;
 
if (BlobBuilder) {
  var bb = new BlobBuilder();
  // Append data in chunks
  bb.append("Hello, ");
  bb.append("World!");
  // Finalize the Blob with a MIME type
  var blob = bb.getBlob("text/plain");
  console.log(blob); // Blob { size: 13, type: "text/plain" }
} else {
  console.error("BlobBuilder is not supported in this browser.");
}

Why It Was Deprecated:#

BlobBuilder suffered from inconsistent implementations across browsers and was deemed overly complex. The W3C eventually replaced it with the simpler, more intuitive Blob constructor, which allowed one-time Blob creation from an array of data parts.

What is the New Blob Constructor?#

The Blob constructor is the modern, standardized way to create Blobs. Introduced in the File API (2012), it simplifies Blob creation by accepting an array of data parts and an optional options object (for MIME type and line endings).

Key Characteristics:#

• One-Time Construction: Creates a Blob directly from an array of data parts (no incremental appending).
• Standardized Syntax: No vendor prefixes—works consistently across modern browsers.
• Flexible Options: Supports specifying MIME type (type) and line ending normalization (endings: "native" or "transparent").

Syntax:#

new Blob(blobParts, options);

• blobParts: An array of data chunks (strings, ArrayBuffers, TypedArrays, DataViews, or other Blobs).
• options (optional): An object with:
  • type: MIME type of the Blob (e.g., "text/plain", "image/png").
  • endings: How to handle line endings in strings ("native" replaces \n with OS-specific endings; "transparent" leaves them as-is). Default: "transparent".

Example Code (Modern):#

// Create a Blob directly from an array of data parts
var blob = new Blob(["Hello, ", "World!"], { type: "text/plain" });
console.log(blob); // Blob { size: 13, type: "text/plain" }

Key Differences Between BlobBuilder and Blob Constructor#

To understand why the Blob constructor replaced BlobBuilder, let’s compare their core features:

How to Convert BlobBuilder Code to the Blob Constructor#

If you’re maintaining legacy code that uses BlobBuilder, migrating to the Blob constructor is straightforward. Follow these steps:

Step 1: Identify BlobBuilder Instances#

Look for code that checks for BlobBuilder, WebKitBlobBuilder, or MozBlobBuilder and replaces it with the Blob constructor directly.

Step 2: Replace append() with an Array of Data Parts#

BlobBuilder uses append() to add data chunks. In the Blob constructor, these chunks become elements of the blobParts array.

Legacy (BlobBuilder):

bb.append("Chunk 1");
bb.append("Chunk 2");
bb.append(new Uint8Array([0x41, 0x42])); // Binary data

Modern (Blob Constructor):

var blobParts = ["Chunk 1", "Chunk 2", new Uint8Array([0x41, 0x42])];

Step 3: Migrate Type and Options#

In BlobBuilder, the MIME type is passed to getBlob(type). In the Blob constructor, it’s specified in options.type.

Legacy (BlobBuilder):

var blob = bb.getBlob("text/plain"); // Type passed here

Modern (Blob Constructor):

var options = { type: "text/plain" }; // Type in options
var blob = new Blob(blobParts, options);

Example Conversion#

Before (BlobBuilder):

var BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder;
if (BlobBuilder) {
  var bb = new BlobBuilder();
  bb.append("Hello, ");
  bb.append("Blob Constructor!");
  var blob = bb.getBlob("text/plain");
  // Use blob (e.g., download, upload)
}

After (Blob Constructor):

// Directly create Blob from array of parts and options
var blob = new Blob(["Hello, ", "Blob Constructor!"], { type: "text/plain" });
// Use blob (e.g., download, upload)

Edge Case: Dynamic Chunk Appending#

If your BlobBuilder code appends chunks dynamically (e.g., in a loop), collect the chunks in an array first, then pass the array to the Blob constructor.

Legacy (Dynamic BlobBuilder):

var bb = new BlobBuilder();
var dataChunks = ["Line 1\n", "Line 2\n", "Line 3\n"];
dataChunks.forEach(chunk => bb.append(chunk));
var blob = bb.getBlob("text/plain");

Modern (Blob Constructor):

var dataChunks = ["Line 1\n", "Line 2\n", "Line 3\n"];
var blob = new Blob(dataChunks, { type: "text/plain" }); // Array passed directly

Common Use Cases for Blobs#

Blobs are versatile and used in many web applications. Here are practical examples using the Blob constructor:

Creating Downloadable Files#

Generate a text file and trigger a download using URL.createObjectURL().

// Create a Blob with text content
var textBlob = new Blob(["Hello, Download!"], { type: "text/plain" });
 
// Create a download link
var downloadLink = document.createElement("a");
downloadLink.href = URL.createObjectURL(textBlob);
downloadLink.download = "example.txt";
downloadLink.textContent = "Download Text File";
 
// Add link to DOM
document.body.appendChild(downloadLink);

Processing Canvas Images#

Convert a canvas to a PNG Blob for upload or display.

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 100, 100);
 
// Convert canvas to Blob (modern browsers support promise-based toBlob)
canvas.toBlob(function(blob) {
  console.log(blob); // Blob { type: "image/png" }
  // Upload blob to server or display in <img>
}, "image/png");

Handling FormData#

Include Blobs in FormData for file uploads.

var formData = new FormData();
var jsonBlob = new Blob([JSON.stringify({ name: "John" })], { type: "application/json" });
 
// Append Blob to FormData with a filename
formData.append("userData", jsonBlob, "data.json");
 
// Upload via fetch
fetch("/upload", { method: "POST", body: formData });

Conclusion#

The BlobBuilder API was an early attempt to simplify Blob creation but was replaced by the more efficient, standardized Blob constructor. The Blob constructor offers:

• Simpler syntax: Directly create Blobs from an array of data parts.
• Better browser support: Works in all modern browsers without prefixes.
• Improved reliability: Clear error handling and consistent behavior.

Migrating from BlobBuilder to the Blob constructor is a small change with big benefits, ensuring your code is maintainable and future-proof.

References#

• W3C File API Specification
• MDN Web Docs: Blob
• MDN Web Docs: BlobBuilder (Deprecated)
• Can I Use: Blob
• Can I Use: BlobBuilder