What's the difference between BlobBuilder and the new Blob constructor?

Question

The W3 announced that they intend to deprecate the BlobBuilder API in preference for the new Blob API.

If I am already using BlobBuilder in a JavaScript app, how can I convert to using this new Blob API? The old WebKitBlobBuilder is still available in the latest WebKit (and Chrome Canary), but it will soon be removed. Before you could write something like this:

var bb = new BlobBuilder();
bb.append(arrayBuffer);
var blob = bb.getBlob(mimeString);

How could this be rewritten to use the new Blob constructor?

Aggappe

This article has a good explanation: updates.html5rocks.com/2012/06/Don-t-Build-Blobs-Construct-Them – Aggappe

Answer 1

Passing an ArrayBuffer to the Blob constructor appears to be deprecated, so:

var dataView = new DataView(arrayBuffer);
var blob = new Blob([dataView], { type: mimeString });

Thirtyone

This gives me Uncaught Error: TYPE_MISMATCH_ERR: DOM File Exception 11 Do you have a full working example? – Lamellate

var arrayBuffer = new ArrayBuffer(16); var mimeString = "text/plain"; var dataView = new DataView(arrayBuffer); var blob = new Blob([dataView], { type: mimeString }); console.log(blob); – Thirtyone

Answer 2

From what the specs says it should be as simple as this. Just check the examples of the page you posted.

var blob = new Blob(arrayBuffer);

[Constructor, Constructor((ArrayBuffer or Blob or DOMString)

Peatroy

Ah thanks. It also looks like Blob() takes a simple Array object, not an ArrayBuffer - at least in Chrome. Not sure if this is how it's supposed to be, but Chrome errors otherwise. – Aggappe

Answer 3

var blob = new Blob([arrayBuffer], {type: mimeString});

Ghiselin

This now produces a warning: "ArrayBuffer values are deprecated in Blob Constructor. Use ArrayBufferView instead." – Thirtyone

var blob = new Blob([new Uint8Array(arrayBuffer)], {type: mimeString}); will fix that for you. – Knisley