Using JavaScript Blob, File, FileReader, ArrayBuffer, DataView, Object URL and Base64 APIs

JavaScript provides several APIs for handling binary data and files, including Blob, File, FileReader, ArrayBuffer, DataView, Object URL and Base64. The article walks through their creation, properties, methods, and practical usage examples.

1. Blob

A Blob represents immutable raw binary data. It can be created with new Blob(array, options) , where array may contain ArrayBuffer, ArrayBufferView, Blob, DOMString, etc. Optional options include type (MIME type) and endings .

new Blob(array, options);

Common MIME types are listed, and a simple example creates a text Blob:

const blob = new Blob(["Hello World"], {type: "text/plain"});
console.log(blob.size); // 11
console.log(blob.type); // "text/plain"

Blob can be turned into a URL with URL.createObjectURL(blob) and loaded in an <iframe> .

1.1 Blob slicing

Use blob.slice([start[, end[, contentType]]]) to obtain a sub‑Blob.

const subBlob = blob.slice(0, 5); // contains "Hello"
iframe.src = URL.createObjectURL(subBlob);

2. File

File is a specialized Blob that includes metadata such as name , size , type , lastModified , etc. Files are obtained via an <input type="file"> element or drag‑and‑drop (DataTransfer).

<input type="file" id="fileInput" multiple="multiple">

fileInput.onchange = e => {
  console.log(e.target.files); // FileList
};

2.1 Drag and drop

const dropZone = document.getElementById("drop-zone");
 dropZone.ondragover = e => e.preventDefault();
 dropZone.ondrop = e => {
   e.preventDefault();
   const files = e.dataTransfer.files;
   console.log(files);
 };

3. FileReader

FileReader reads Blob/File data asynchronously. It provides readAsArrayBuffer , readAsBinaryString , readAsDataURL , and readAsText methods, and fires load , error , abort , and progress events.

const reader = new FileReader();
reader.onload = e => console.log(e.target.result);
reader.readAsText(fileInput.files[0]);

For binary files, readAsDataURL returns a Base64 data URL that can be used directly as an image source.

4. ArrayBuffer

ArrayBuffer is a fixed‑length raw binary buffer. It cannot be accessed directly; you use TypedArray or DataView to read/write.

const buffer = new ArrayBuffer(16);
console.log(buffer.byteLength); // 16

4.1 TypedArray

TypedArray provides nine view constructors (Int8Array, Uint8Array, Uint8ClampedArray, Int16Array, Uint16Array, Int32Array, Uint32Array, Float32Array, Float64Array). They expose length , byteLength , BYTES_PER_ELEMENT , and a buffer property.

let view = new Int8Array(16);
view[0] = 10;
view[10] = 6;
console.log(view);

4.2 DataView

DataView offers low‑level read/write methods with explicit endianness control.

const dv = new DataView(buffer);
const uint8 = dv.getUint8(0);
 dv.setUint16(2, 500, true); // little‑endian

5. Object URL

Object URLs (Blob URLs) are generated with URL.createObjectURL(blob) and can be assigned to src of <img> , <script> , <a> , etc. They should be released with URL.revokeObjectURL() when no longer needed.

const objUrl = URL.createObjectURL(file);
preview.src = objUrl;
URL.revokeObjectURL(objUrl);

6. Base64

Base64 encodes binary data as printable characters. In JavaScript, btoa() encodes and atob() decodes. It is often used with Data URLs (e.g., canvas.toDataURL() or FileReader.readAsDataURL() ).

const base64 = btoa("JavaScript");
const str = atob(base64);

7. Format conversion examples

Conversions between ArrayBuffer, Blob, and Base64 are demonstrated:

// ArrayBuffer → Blob
const blob = new Blob([new Uint8Array(buffer, byteOffset, length)]);
// ArrayBuffer → Base64
const base64 = btoa(String.fromCharCode.apply(null, new Uint8Array(arrayBuffer)));
// Base64 → Blob (function example)
function base64toBlob(base64Data, contentType, sliceSize) { /* ... */ }
// Blob → ArrayBuffer (Promise example)
function blobToArrayBuffer(blob) { /* ... */ }
// Blob → Base64 (Promise example)
function blobToBase64(blob) { /* ... */ }
// Blob → Object URL
const objectUrl = URL.createObjectURL(blob);