File Uploads with Live Progress Bars

Technical Deep Dive & Specifications

The Upload Telemetry Gap: Fetch vs XHR

Many modern developers ask: "Why use XMLHttpRequest when we have fetch()?"

+-------------------------------------------------------------------------------+
|                      DOWNLOAD PROGRESS vs UPLOAD PROGRESS                     |
+-------------------------------------------------------------------------------+
| Feature              | Fetch API (Modern)            | XMLHttpRequest (Classic)|
|----------------------|-------------------------------|-------------------------|
| Download Progress    | ✅ Native (via ReadableStream) | ✅ Native (onprogress)   |
| Upload Progress      | ⚠️ Experimental (Streams only)| ✅ Rock-Solid (xhr.upload|
| Multipart Streaming  | ⚠️ Complex piping             | ✅ Automatic FormData   |
| Cancel In-Flight     | ✅ AbortController           | ✅ xhr.abort()          |
| Browser Support      | Modern Only                   | 100% Universal          |
+-------------------------------------------------------------------------------+

While WHATWG Fetch is specifying writable streams for request bodies, XMLHttpRequest.upload remains the production standard across FAANG and enterprise systems for tracking file upload progress.

The ProgressEvent Architecture

The xhr.upload target emits granular lifecycle events as bytes leave the client socket:

[ xhr.send(formData) ]
          │
          ▼
[ xhr.upload.addEventListener('loadstart') ]  ──> Initial connection opened
          │
          ▼
[ xhr.upload.addEventListener('progress', e) ] ──> Fires repeatedly as chunks transmit
    ├── e.lengthComputable === true
    ├── e.loaded: Bytes transferred so far (e.g. 4,194,304)
    └── e.total: Total bytes in payload (e.g. 16,777,216)
          │
          ▼
[ Calculate Percentage: Math.round((e.loaded / e.total) * 100) ]
          │
          ▼
[ xhr.upload.addEventListener('load') ]      ──> All upload bytes transmitted to server
          │
          ▼
[ xhr.addEventListener('load') ]             ──> Server finished processing & returned HTTP response

const xhr = new XMLHttpRequest();
xhr.open('POST', '/api/upload');

// 1. Monitor upload stream
xhr.upload.addEventListener('progress', (event) => {
  if (event.lengthComputable) {
    const percent = Math.round((event.loaded / event.total) * 100);
    progressBar.value = percent;
    statusText.textContent = `${percent}% uploaded (${(event.loaded / 1024 / 1024).toFixed(1)} MB)`;
  }
});

// 2. Upload completed
xhr.upload.addEventListener('load', () => {
  statusText.textContent = 'Upload complete. Processing on server...';
});

// 3. Server HTTP response returned
xhr.addEventListener('load', () => {
  if (xhr.status >= 200 && xhr.status < 300) {
    console.log('Server response:', xhr.responseText);
  }
});

The Native <progress> Element vs Accessible Custom Bars

HTML5 provides the semantic <progress> element. For custom styled UI, ensure standard WAI-ARIA attributes are present:

<!-- Native Semantic Progress -->
<progress id="upload-bar" value="45" max="100">45%</progress>

<!-- Custom Accessible Progress Component -->
<div 
  class="custom-progress" 
  role="progressbar" 
  aria-valuenow="45" 
  aria-valuemin="0" 
  aria-valuemax="100"
  aria-label="File upload progress"
>
  <div class="progress-fill" style="width: 45%;"></div>
</div>

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

• Lines 82–86 (<progress id="upload-bar" ...>): Native HTML5 progress element with standard min (0) and max (100) attributes.
• Lines 111–114 (dropZone dragover & drop): e.preventDefault() is mandatory in dragover to instruct the browser that the drop zone accepts files instead of navigating to the file URL.
• Lines 126–135 (stageFile(file)): Validates the selected File object from e.dataTransfer.files or <input type="file">, formats file size to MB, and reveals the telemetry panel.
• Lines 159–175 (Progress calculation & Speed estimation): Calculates the percentage (loaded / total) * 100 and determines transfer velocity by measuring elapsed time via performance.now().
• Lines 178–186 (btnCancel.onclick): Invokes activeXhr.abort() or halts streaming, immediately stopping socket data flow.

Expected Browser Render Output

+-------------------------------------------------------------+
| Streaming File Uploader                                     |
|                                                             |
| +---------------------------------------------------------+ |
| | 📁 Drag & Drop your file here                           | |
| | or click to browse from device                          | |
| +---------------------------------------------------------+ |
|                                                             |
| presentation-deck.mp4                                       |
| 14.80 MB (video/mp4)                                        |
| [========================>................]                 |
| 64% (9.5 / 14.8 MB)                             3.4 MB/s    |
|                                                             |
| [ Cancel Upload ]                                           |
+-------------------------------------------------------------+