Don't Build Blobs, Construct Them
Google Developers Logo

Here’s a heads up to all you BlobBuilder fans…it’s going bye bye!

BlobBuilder is a handy API for creating Blobs (or Files) in JavaScript. It’s been around since Chrome 8, FF 6, and IE 10 but has never shipped in Safari,…and likely never will. Recent spec changes to the File API include a new constructor for Blob, which essentially makes BlobBuilder irrelevant. In fact, Safari nightlies have already disabled it and Chrome will start to warn you in the console very soon.

For comparison, below is the same code using the deprecated BlobBuilder and the new Blob constructor. The snippet creates a stylesheet and appends it to the DOM.

BlobBuilder():

window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder ||
                     window.MozBlobBuilder || window.MSBlobBuilder;
window.URL = window.URL || window.webkitURL;

var bb = new BlobBuilder();
bb.append('body { color: red; }');
var blob = bb.getBlob('text/css');

var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = window.URL.createObjectURL(blob);

document.body.appendChild(link);

Blob():

window.URL = window.URL || window.webkitURL;

var blob = new Blob(['body { color: red; }'], {type: 'text/css'});

var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = window.URL.createObjectURL(blob);
document.body.appendChild(link);

Handy! So now, instead of appending to a BlobBuilder, we can simply create the Blob from an array of data parts. The data parts can be different types (DOMString, ArrayBuffer, Blob) and in any order. For example:

var blob = new Blob(['1234567890', blob, arrayBuffer]);

Also note that the second object param is optional. For more info on these changes, see the MDN docs on Blob.

Authors
Profile photo of Eric Bidelman

Engineer @ Google working on Polymer, Chrome, and the web

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under the Apache 2.0 License. For details, see our Terms of Service.