JavaScript Converting between Blobs and ArrayBuffers

Download JavaScript for free


JavaScript has two primary ways to represent binary data in the browser. ArrayBuffers/TypedArrays contain mutable (though still fixed-length) binary data which you can directly manipulate. Blobs contain immutable binary data which can only be accessed through the asynchronous File interface.

Convert a Blob to an ArrayBuffer (asynchronous)

var blob = new Blob(["\x01\x02\x03\x04"]),
    fileReader = new FileReader(),

fileReader.onload = function() {
    array = this.result;
    console.log("Array contains", array.byteLength, "bytes.");


Convert a Blob to an ArrayBuffer using a Promise (asynchronous)

var blob = new Blob(["\x01\x02\x03\x04"]);

var arrayPromise = new Promise(function(resolve) {
    var reader = new FileReader();

    reader.onloadend = function() {


arrayPromise.then(function(array) {
    console.log("Array contains", array.byteLength, "bytes.");

Convert an ArrayBuffer or typed array to a Blob

var array = new Uint8Array([0x04, 0x06, 0x07, 0x08]);

var blob = new Blob([array]);
Creating a TypedArray from a Base64 string