How Browser-Based File Tools Work (WebAssembly Explained)

1// Reading a file from disk into browser memory
2// This uses the File API — no network request involved
3 
4const fileInput = document.getElementById('file-input') as HTMLInputElement;
5 
6fileInput.addEventListener('change', async () => {
7  const file = fileInput.files?.[0];
8  if (!file) return;
9 
10  // Method 1: ArrayBuffer (for binary processing — PDFs, images)
11  const buffer = await file.arrayBuffer();
12  // → Raw binary data in memory, ready for WASM libraries
13 
14  // Method 2: Text (for text files — JSON, CSV, YAML)
15  const text = await file.text();
16  // → UTF-8 string
17 
18  // Method 3: DataURL (for displaying in <img> or <canvas>)
19  const url = await new Promise<string>(resolve => {
20    const reader = new FileReader();
21    reader.onload = () => resolve(reader.result as string);
22    reader.readAsDataURL(file);
23  });
24 
25  // File metadata — read without loading file content
26  console.log(file.name);    // "document.pdf"
27  console.log(file.size);    // 1048576 (bytes)
28  console.log(file.type);    // "application/pdf"
29  console.log(file.lastModified); // Unix timestamp
30});

1// Loading and using a WebAssembly module
2// Example: a hypothetical image processing WASM module
3 
4async function loadWasmModule(): Promise<WebAssembly.Instance> {
5  // Fetch the compiled WASM binary
6  const response = await fetch('/codecs/image-processor.wasm');
7  const wasmBuffer = await response.arrayBuffer();
8 
9  // Compile and instantiate — V8 compiles to machine code
10  const { instance } = await WebAssembly.instantiate(wasmBuffer, {
11    env: {
12      // WASM imports — memory allocators, etc.
13      malloc: (size: number) => 0, // Simplified
14    }
15  });
16 
17  return instance;
18}
19 
20// Real-world: using squoosh's WASM codecs for image compression
21// The squoosh library wraps MozJPEG, libavif, libwebp in WASM
22import { ImagePool } from '@squoosh/lib';
23 
24async function compressImage(file: File): Promise<Blob> {
25  const pool = new ImagePool();
26  const image = pool.ingestImage(await file.arrayBuffer());
27 
28  await image.encode({
29    webp: { quality: 85 },  // MozWebP at quality 85
30  });
31 
32  const { webp } = await image.encodedWith;
33  await pool.close();
34 
35  return new Blob([webp.binary], { type: 'image/webp' });
36}

1// main.ts — main thread
2const worker = new Worker(new URL('./compression.worker.ts', import.meta.url));
3 
4// Transfer the ArrayBuffer to the worker (zero-copy — no duplication)
5const buffer = await file.arrayBuffer();
6worker.postMessage({ buffer, quality: 85 }, [buffer]);
7// ↑ Passing buffer in the "transfer" array transfers ownership
8// The buffer is no longer accessible in the main thread after this
9 
10worker.addEventListener('message', (event) => {
11  const { compressed, duration } = event.data;
12  console.log(`Compressed in ${duration}ms`);
13  downloadFile(new Blob([compressed], { type: 'image/webp' }));
14});
15 
16// compression.worker.ts — background thread
17// This runs on a separate OS thread — UI stays responsive
18self.addEventListener('message', async (event) => {
19  const { buffer, quality } = event.data;
20  const start = performance.now();
21 
22  // Heavy WASM compression — safe here, not on the main thread
23  const compressed = await compressWithWasm(buffer, quality);
24 
25  self.postMessage({
26    compressed,
27    duration: performance.now() - start
28  }, [compressed]); // Transfer result back (zero-copy)
29});

1// OffscreenCanvas allows GPU canvas operations in a Web Worker
2// (Normally canvas is restricted to the main thread)
3 
4// In a Web Worker:
5const canvas = new OffscreenCanvas(1920, 1080);
6const ctx = canvas.getContext('2d');
7 
8// Draw image data to canvas (off main thread)
9ctx.drawImage(bitmap, 0, 0);
10 
11// Export as WebP — GPU-accelerated, off main thread
12const blob = await canvas.convertToBlob({ type: 'image/webp', quality: 0.85 });
13 
14// Transfer blob back to main thread for download
15self.postMessage({ blob }, []);

1// Writing processed data back to the user's filesystem
2// No server involved — the browser handles the download
3 
4function downloadBlob(blob: Blob, filename: string): void {
5  // Create a temporary object URL pointing to the blob in memory
6  const url = URL.createObjectURL(blob);
7 
8  // Trigger a download via a programmatic click
9  const link = document.createElement('a');
10  link.href = url;
11  link.download = filename;
12  document.body.appendChild(link);
13  link.click();
14  document.body.removeChild(link);
15 
16  // Release the object URL from memory (important for large files)
17  // The blob remains in memory until garbage collected,
18  // but the URL reference is freed immediately
19  URL.revokeObjectURL(url);
20}
21 
22// For ZIP files containing multiple outputs (e.g., batch compression):
23import JSZip from 'jszip';
24 
25async function downloadAsZip(files: { name: string; blob: Blob }[]): Promise<void> {
26  const zip = new JSZip();
27  files.forEach(({ name, blob }) => zip.file(name, blob));
28  const zipBlob = await zip.generateAsync({ type: 'blob' });
29  downloadBlob(zipBlob, 'compressed-images.zip');
30}