Promise Wrapper for FileReader

read-blob.md

Promise Wrapper for FileReader

This is a simple wrapper for the FileReader API. It allows converting a Blob (and therefore a File as well) to either a plain text string, a data URL or an ArrayBuffer with a nice and clean Promise API.

Signature

This is the TypeScript signature of the readBlob function:

/**
 * Read a blob or file and convert it to another data type
 *
 * @param blob   The blob or file to read
 * @param target The format to target (defaults to "text")
 */
declare function readBlob(blob: Blob): Promise<string>
declare function readBlob(blob: Blob, target: 'text'): Promise<string>
declare function readBlob(blob: Blob, target: 'dataURL'): Promise<string>
declare function readBlob(blob: Blob, target: 'ArrayBuffer'): Promise<ArrayBuffer>

Usage

Usage is pretty difficult to visibly demonstrate without a surrounding DOM, so I made a demo on CodePen.

read-blob.mjs

/**
 * Read a blob or file and convert it to another data type
 *
 * @param {Blob}  blob    The blob or file to read
 * @param {string} target The format to target
 *                        Defaults to "text", might be one of
 *                        "text", "dataURL" or "ArrayBuffer"
 * @return {Promise}
 */
export function readBlob(blob, target = 'text') {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onload = () => {
      resolve(reader.result)
    }
    reader.onerror = reject
    reader[`readAs${target.slice(0, 1).toUpperCase()}${target.slice(1)}`](blob)
  })
}