Skip to main content

How to Convert a Blob to an ArrayBuffer in JavaScript

In modern web development, a Blob (Binary Large Object) is a file-like object of immutable, raw data. An ArrayBuffer, on the other hand, is a generic, fixed-length raw binary data buffer. A common task is to convert a Blob into an ArrayBuffer to read or manipulate its underlying binary data.

This guide will teach you the modern and standard method for this conversion using the blob.arrayBuffer() method, which is available on all modern browsers. We will cover how to use it with both async/await and .then().

The Core Concept: Asynchronous Conversion​

Reading the contents of a Blob is an asynchronous operation. This is because the blob's data might be large and stored on disk, so reading it directly could block the main thread. Therefore, any method that reads a blob's content will return a Promise. You must wait for this promise to resolve to get the final ArrayBuffer.

The blob.arrayBuffer() method is the standard, built-in tool for this job. It is called directly on the Blob object and returns a Promise that resolves with an ArrayBuffer containing the blob's binary data.

How to Use it with async/await​

The async/await syntax is the most readable and recommended way to work with promises.

For example, you have a Blob and need to get its contents as an ArrayBuffer.

// Problem: How to get the underlying ArrayBuffer from this Blob?
const myBlob = new Blob(['Hello, World!']);

Solution:

async function convertBlobToArrayBuffer(blob) {
  // .arrayBuffer() returns a Promise, so we must await it
  const arrayBuffer = await blob.arrayBuffer();
  
  return arrayBuffer;
}

// Example Usage:
const myBlob = new Blob(['Hello, World!']);

convertBlobToArrayBuffer(myBlob).then(buffer => {
  console.log(buffer);
  console.log(`Buffer byte length: ${buffer.byteLength}`); // Output: Buffer byte length: 13
});

How to Use it with .then()​

If you are not in an async function, you can use the classic .then() method to handle the promise.

Solution:

const myBlob = new Blob(['Hello, World!']);

myBlob.arrayBuffer()
  .then(buffer => {
    console.log(buffer);
    console.log(`Buffer byte length: ${buffer.byteLength}`); // Output: Buffer byte length: 13
  })
  .catch(error => {
    console.error('There was an error converting the blob:', error);
  });
note

This is functionally identical to the async/await example.

Bonus: Converting an ArrayBuffer Back to a Blob​

The reverse operation is synchronous. You can pass an ArrayBuffer (or an array of ArrayBuffers and other data) directly to the new Blob() constructor.

Solution:

async function processBlob(blob) {
  // Convert Blob to ArrayBuffer
  const buffer = await blob.arrayBuffer();
  
  // (You could manipulate the buffer here)
  
  // Convert ArrayBuffer back to a Blob
  const newBlob = new Blob([buffer]);
  
  // Prove that the content is the same by reading the new blob as text
  const text = await newBlob.text();
  console.log(text);
}

const myBlob = new Blob(['Hello, World!']);
processBlob(myBlob); // Output: Hello, World!

Conclusion​

For converting a Blob to an ArrayBuffer, the choice is clear and simple.

  • The blob.arrayBuffer() method is the standard and recommended best practice.
  • Because this method is asynchronous, you must handle the returned Promise using either async/await (preferred for readability) or a .then() block.
  • The reverse operation, converting an ArrayBuffer to a Blob, is a synchronous operation using the new Blob([arrayBuffer]) constructor.

Table of Contents