Optimizing Payload Size for Mobile Uploads: Binary Streams & Fetch API #

Mobile networks introduce strict latency and data constraints. Unoptimized upload payloads trigger timeouts, exhaust device memory, and degrade user retention. This guide details diagnostic workflows, native binary encoding, and resilient fetch configurations for production-grade mobile uploads.

Payload Analysis & Encoding Selection #

Start by profiling your current upload pipeline. Open Chrome DevTools and navigate to the Network tab. Filter by XHR/Fetch and inspect the Payload column. If you see data:image/... or application/json wrapping media, you are transmitting text-encoded data.

Replace FileReader.readAsDataURL() immediately. Base64 encoding inflates binary payloads by approximately 33% due to ASCII mapping. This directly impacts mobile data caps and increases Time-To-First-Byte (TTFB). Review Base64 vs Binary Encoding for exact overhead calculations and encoding trade-offs.

Validate MIME types before transmission. Mobile cameras often return inconsistent type properties. Normalize extensions and verify against an allowlist to prevent 415 Unsupported Media Type rejections.

// ❌ Anti-pattern: Text-based serialization
const reader = new FileReader();
reader.onload = () => {
 const base64Data = reader.result; // ~33% larger, blocks main thread
 fetch('/upload', { method: 'POST', body: base64Data });
};
reader.readAsDataURL(file);

// ✅ Production pattern: Direct binary reference
const formData = new FormData();
formData.append('media', file, file.name); // Maintains native binary stream
fetch('/upload', { method: 'POST', body: formData });

Constructing Optimized Multipart Requests #

Large files must never load entirely into device RAM. Mobile browsers enforce strict memory limits. iOS Safari frequently terminates tabs exceeding 1GB of heap usage.

Use Blob.slice() to partition files into manageable segments. Append these slices directly to FormData. The browser automatically generates multipart/form-data boundaries. Manual boundary generation introduces parsing errors and security vulnerabilities.

Apply client-side compression before appending. createImageBitmap() and OffscreenCanvas resize images without blocking the UI thread. Reference Upload Fundamentals & Browser APIs for stream handling best practices and memory management.

async function prepareOptimizedPayload(file, targetWidth = 1280) {
 if (file.type.startsWith('image/')) {
 const bitmap = await createImageBitmap(file);
 const canvas = new OffscreenCanvas(targetWidth, (targetWidth / bitmap.width) * bitmap.height);
 const ctx = canvas.getContext('2d');
 ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
 const blob = await canvas.convertToBlob({ type: 'image/jpeg', quality: 0.8 });
 return { blob, size: blob.size };
 }
 return { blob: file, size: file.size };
}

Timeout Handling & Retry Orchestration #

Cellular networks experience frequent handoffs. Silent request hangs exhaust server connection pools and trigger client-side OOM crashes.

Wrap every fetch call in an AbortController. Apply dynamic timeout thresholds based on connection type. Implement exponential backoff with jitter for 5xx and 429 responses. Persist chunk state in IndexedDB to resume interrupted transfers without restarting.

Monitor ReadableStream consumption. fetch lacks native onprogress for uploads. Track byte consumption by wrapping the request body or polling performance.getEntriesByType('resource').

function getDynamicTimeout() {
 const conn = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
 return conn?.effectiveType === '4g' ? 30000 : 60000;
}

function calculateBackoff(attempt) {
 const baseDelay = 1000;
 const maxDelay = 10000;
 const jitter = Math.random() * 500;
 return Math.min(baseDelay * Math.pow(2, attempt) + jitter, maxDelay);
}

Implementation Pattern: Chunked Binary Upload #

The following implementation combines chunking, abort signals, exponential backoff, and IndexedDB persistence. It processes files in 2MB segments and resumes automatically on failure.

const CHUNK_SIZE = 2 * 1024 * 1024; // 2MB
const UPLOAD_URL = '/api/v1/upload';

// IndexedDB wrapper for persistence
const dbPromise = new Promise((resolve) => {
 const request = indexedDB.open('upload_cache', 1);
 request.onupgradeneeded = (e) => e.target.result.createObjectStore('chunks', { keyPath: 'id' });
 request.onsuccess = () => resolve(request.result);
});

async function saveChunkState(fileId, chunkIndex, etag) {
 const db = await dbPromise;
 const tx = db.transaction('chunks', 'readwrite');
 tx.objectStore('chunks').put({ id: `${fileId}_${chunkIndex}`, etag, uploadedAt: Date.now() });
 return tx.complete;
}

async function uploadChunked(file, fileId) {
 const totalChunks = Math.ceil(file.size / CHUNK_SIZE);
 let attempt = 0;

 for (let i = 0; i < totalChunks; i++) {
 const start = i * CHUNK_SIZE;
 const end = Math.min(start + CHUNK_SIZE, file.size);
 const chunk = file.slice(start, end);
 const chunkId = `${fileId}_${i}`;

 // Check IndexedDB for previously uploaded chunks
 const db = await dbPromise;
 const tx = db.transaction('chunks', 'readonly');
 const existing = await new Promise(r => {
 const req = tx.objectStore('chunks').get(chunkId);
 req.onsuccess = () => r(req.result);
 });
 if (existing) continue;

 const controller = new AbortController();
 const timeoutId = setTimeout(() => controller.abort(), getDynamicTimeout());

 try {
 const formData = new FormData();
 formData.append('chunk', chunk, `${file.name}.part${i}`);
 formData.append('chunkIndex', i);
 formData.append('totalChunks', totalChunks);
 formData.append('fileId', fileId);

 const response = await fetch(UPLOAD_URL, {
 method: 'POST',
 body: formData,
 signal: controller.signal,
 headers: { 'X-Chunk-Index': i.toString() }
 });

 if (!response.ok) throw new Error(`HTTP ${response.status}`);
 
 const etag = response.headers.get('ETag');
 await saveChunkState(fileId, i, etag);
 console.log(`[Upload] Chunk ${i + 1}/${totalChunks} complete`);
 attempt = 0; // Reset backoff on success
 } catch (err) {
 if (err.name === 'AbortError' || err.message.includes('NetworkError')) {
 const delay = calculateBackoff(attempt++);
 console.warn(`[Upload] Chunk ${i} failed. Retrying in ${delay}ms`);
 await new Promise(r => setTimeout(r, delay));
 i--; // Retry same chunk
 } else {
 throw err; // Fail fast on non-network errors
 }
 } finally {
 clearTimeout(timeoutId);
 }
 }
 console.log('[Upload] Transfer finalized');
}

Common Pitfalls #

FAQ #

How do I prevent mobile browser crashes when uploading 100MB+ videos? #

Avoid loading the full file into RAM. Use Blob.slice() to chunk the file into 2-5MB segments. Upload sequentially via fetch and store progress in IndexedDB. This caps peak memory usage regardless of total file size.

Does fetch support upload progress events natively? #

No. fetch lacks built-in upload progress tracking. Use XMLHttpRequest.upload.onprogress for legacy environments. Alternatively, wrap the request body in a ReadableStream with a custom TransformStream to count transmitted bytes.

When should I use Content-Encoding: gzip for uploads? #

Only for text-based payloads like JSON or XML. Binary media files (JPEG, MP4, PNG) are already compressed. Applying gzip increases CPU overhead, drains mobile batteries, and can actually bloat the payload due to dictionary overhead.