How to Read Blob in JavaScript

Assuming the content is a binary string, i.e. no interpretation of characters, no encoding. Just an array of bytes, an image for example.

With FileReader

Usually FileReader is used to read Blobs or Files.

According to a blogpost about reading ArrayBuffers reading with FileReader is 27 times slower than converting it with ArrayBuffers.

function convertBlobToBinaryString(blob) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();

    reader.onload = () => {
      resolve(reader.result);
    }

    reader.onabort = () => {
      reject(new Error('Reading blob aborted'));
    }

    reader.onerror = () => {
      reject(new Error('Error reading blob'));
    }

    reader.readAsBinaryString(blob);
  });
}

With Arraybuffer

function blobToBinaryStringArrayBuf(blob) {
  return blob.arrayBuffer()
    .then(ab => new Uint8Array(ab))
    .then(charArr => {
      const mapped = [];
      for(let i = 0; i < charArr.length; i = i + 1) {
        mapped.push(String.fromCharCode(charArr[i]))
      }
      return mapped.join('');
    });
}

Example

Save it into a file, open it in a browser and look into developer console.

You should see:

blob1: ��~sirius black blob.html:29:33
blob2: ��~hermione granger blob.html:48:33

HTML file:

<!DOCTYPE html>
<html>
  <header><meta charset="utf-8" /></header>
  <body>
    <script>
      function convertBlobToBinaryString(blob) {
        return new Promise((resolve, reject) => {
          const reader = new FileReader();

          reader.onload = () => {
            resolve(reader.result);
          }

          reader.onabort = () => {
            reject(new Error('Reading blob aborted'));
          }

          reader.onerror = () => {
            reject(new Error('Error reading blob'));
          }

          reader.readAsBinaryString(blob);
        });
      }

      const blob1 = new Blob(['\x00\x07\x7Esirius black']);

      convertBlobToBinaryString(blob1)
        .then(result => console.log('blob1: ' + result));
    </script>
    <script>
      // cannot use .map on Uint8Array, because it doesn't work properly
      function blobToBinaryStringArrayBuf(blob) {
        return blob.arrayBuffer()
          .then(ab => new Uint8Array(ab))
          .then(charArr => {
            const mapped = [];
            for(let i = 0; i < charArr.length; i = i + 1) {
              mapped.push(String.fromCharCode(charArr[i]))
            }
            return mapped.join('');
          });
      }     

      const blob2 = new Blob(['\x00\x07\x7Ehermione granger']);

      blobToBinaryStringArrayBuf(blob2)
        .then(result => console.log('blob2: ' + result))
    </script>
  </body>
</html>

That's all.