Rectangle 27 0

javascript How to go from Blob to ArrayBuffer?


// ArrayBuffer -> Blob
var uint8Array  = new Uint8Array([1, 2, 3]);
var arrayBuffer = uint8Array.buffer;
var blob        = new Blob([arrayBuffer]);

// Blob -> ArrayBuffer
var uint8ArrayNew  = null;
var arrayBufferNew = null;
var fileReader     = new FileReader();
fileReader.onload  = function(progressEvent) {
    arrayBufferNew = this.result;
    uint8ArrayNew  = new Uint8Array(arrayBufferNew);

    // warn if read values are not the same as the original values
    // arrayEqual from: http://stackoverflow.com/questions/3115982/how-to-check-javascript-array-equals
    function arrayEqual(a, b) { return !(a<b || b<a); };
    if (arrayBufferNew.byteLength !== arrayBuffer.byteLength) // should be 3
        console.warn("ArrayBuffer byteLength does not match");
    if (arrayEqual(uint8ArrayNew, uint8Array) !== true) // should be [1,2,3]
        console.warn("Uint8Array does not match");
};
fileReader.readAsArrayBuffer(blob);
fileReader.result; // also accessible this way once the blob has been read
ArrayBuffer
Blob
FileReader
var arrayBuffer;
var fileReader = new FileReader();
fileReader.onload = function() {
    arrayBuffer = this.result;
};
fileReader.readAsArrayBuffer(blob);

@HenleyChiu I edited the answer to include a short version of the code. The longer example is intended to be fully self-contained (shows how to create the ArrayBuffer, the Blob, and back again). I haven't been able to find a synchronous way to read a Blob without using a Web Worker and FileReaderSync.

Here's a longer example:

Some people really want to prove the callback hell exists. It makes sense for LARGE blobs, but for normal use cases JavaScript should provide a sync method.

This was tested out in the console of Chrome 27, Firefox 20, and Safari 6.

doesn't this seem like a lot of code.. for something that should be simple?

Note
Rectangle 27 0

javascript How to go from Blob to ArrayBuffer?


var arrayBuffer;
var fileReader = new FileReader();
fileReader.onload = function(event) {
    arrayBuffer = event.target.result;
};
fileReader.readAsArrayBuffer(blob);
var fileReader = new FileReader();
fileReader.onload = (event) => {
    this.externalScopeVariable = event.target.result;
};
fileReader.readAsArrayBuffer(blob);

Why this is better? Because then we may use arrow function without losing the context

You don't actually need to access the function scope to get the result on the onload callback, you can freely do the following on the event parameter:

Note
Rectangle 27 0

javascript How to go from Blob to ArrayBuffer?


// ArrayBuffer -> Blob
var uint8Array  = new Uint8Array([1, 2, 3]);
var arrayBuffer = uint8Array.buffer;
var blob        = new Blob([arrayBuffer]);

// Blob -> ArrayBuffer
var uint8ArrayNew  = null;
var arrayBufferNew = null;
var fileReader     = new FileReader();
fileReader.onload  = function(progressEvent) {
    arrayBufferNew = this.result;
    uint8ArrayNew  = new Uint8Array(arrayBufferNew);

    // warn if read values are not the same as the original values
    // arrayEqual from: http://stackoverflow.com/questions/3115982/how-to-check-javascript-array-equals
    function arrayEqual(a, b) { return !(a<b || b<a); };
    if (arrayBufferNew.byteLength !== arrayBuffer.byteLength) // should be 3
        console.warn("ArrayBuffer byteLength does not match");
    if (arrayEqual(uint8ArrayNew, uint8Array) !== true) // should be [1,2,3]
        console.warn("Uint8Array does not match");
};
fileReader.readAsArrayBuffer(blob);
fileReader.result; // also accessible this way once the blob has been read
ArrayBuffer
Blob
FileReader
var arrayBuffer;
var fileReader = new FileReader();
fileReader.onload = function() {
    arrayBuffer = this.result;
};
fileReader.readAsArrayBuffer(blob);

@HenleyChiu I edited the answer to include a short version of the code. The longer example is intended to be fully self-contained (shows how to create the ArrayBuffer, the Blob, and back again). I haven't been able to find a synchronous way to read a Blob without using a Web Worker and FileReaderSync.

Here's a longer example:

Some people really want to prove the callback hell exists. It makes sense for LARGE blobs, but for normal use cases JavaScript should provide a sync method.

This was tested out in the console of Chrome 27, Firefox 20, and Safari 6.

doesn't this seem like a lot of code.. for something that should be simple?

Note
Rectangle 27 0

javascript How to go from Blob to ArrayBuffer?


var arrayBuffer;
var fileReader = new FileReader();
fileReader.onload = function(event) {
    arrayBuffer = event.target.result;
};
fileReader.readAsArrayBuffer(blob);
var fileReader = new FileReader();
fileReader.onload = (event) => {
    this.externalScopeVariable = event.target.result;
};
fileReader.readAsArrayBuffer(blob);

Why this is better? Because then we may use arrow function without losing the context

You don't actually need to access the function scope to get the result on the onload callback, you can freely do the following on the event parameter:

Note
Rectangle 27 0

javascript How to go from Blob to ArrayBuffer?


@HenleyChiu I edited the answer to include a short version of the code. The longer example is intended to be fully self-contained (shows how to create the ArrayBuffer, the Blob, and back again). I haven't been able to find a synchronous way to read a Blob without using a Web Worker and FileReaderSync.

Here's a longer example:

This was tested out in the console of Chrome 27, Firefox 20, and Safari 6.

doesn't this seem like a lot of code.. for something that should be simple?

Note