Mastering Large File Uploads in the Browser: Chunking, Resume, and Progress

Introduction

When a business needs to upload extremely large files—such as big Excel datasets or media files—the author investigated Qiniu and Tencent Cloud's slice upload features and compiled a comprehensive guide on implementing large‑file upload functionality on the frontend.

Why Large File Uploads Matter

Uploading huge files can take a long time, especially on poor network conditions, increasing the chance of packet loss and requiring users to wait without being able to refresh the page.

Common Upload Methods

Standard Form Upload

Using a regular HTML form with enctype="multipart/form-data" and a PHP endpoint that calls move_uploaded_file to store the file.

<form method="post" enctype="multipart/form-data">
  <input type="file" name="file">
  <button type="submit">Upload</button>
</form>

// PHP (index.php)
if (move_uploaded_file($_FILES['file']['tmp_name'], $destPath)) {
    echo json_encode(['url' => $destPath]);
}

Base64 Encoding Upload

The file is read into a canvas, converted to a Base64 string, sent to the server, decoded, and saved.

var imgURL = URL.createObjectURL(file);
ctx.drawImage(imgURL, 0, 0);
var data = canvas.toDataURL("image/jpeg", 0.5);
// Server (PHP)
$imgData = $_REQUEST['imgData'];
$base64 = explode(',', $imgData)[1];
$img = base64_decode($base64);
file_put_contents('./test.jpg', $img);

Base64 increases payload size by about 33 % and is therefore inefficient for very large files.

Binary Upload

Read the file as a binary string and send it via FormData or XMLHttpRequest.

function readBinary(text) {
  var data = new ArrayBuffer(text.length);
  var ui8a = new Uint8Array(data);
  for (var i = 0; i < text.length; i++) {
    ui8a[i] = text.charCodeAt(i) & 0xff;
  }
  console.log(ui8a);
}

var reader = new FileReader();
reader.onload = function() { readBinary(this.result); };
reader.readAsBinaryString(file);

let files = e.target.files;
let formData = new FormData();
formData.append('file', file);
axios.post(url, formData);

Older browsers (e.g., IE) do not support direct FormData uploads; they fall back to a hidden iframe technique.

Problems with Direct Uploads

Uploading a whole file in a single request can cause server time‑outs, and if the upload fails the entire file must be resent. This motivates splitting the file into smaller chunks.

Requirements for Robust Large‑File Upload

Support chunked (slice) requests.

Enable resumable uploads (break‑point continuation).

Show upload progress and allow pausing.

Chunked Upload (File Slicing)

Using the Blob.slice method (or its equivalent in other languages) the file is divided into pieces, each sent separately. The server later reassembles the chunks.

In PHP, the received chunks can be merged:

$target = './merged_file.ext';
$handle = fopen($target, 'ab');
foreach ($chunks as $chunkPath) {
    $data = file_get_contents($chunkPath);
    fwrite($handle, $data);
    // optionally delete $chunkPath
}
fclose($handle);

Libraries such as up6 handle the slicing, metadata (chunk index, MD5), and merging automatically.

Resumable Upload

up6 stores both server‑side and client‑side records of uploaded chunks. When the user refreshes or reopens the page, the client queries the server for already received chunks and continues uploading only the missing pieces.

Server‑side logic simply returns the list of existing chunks for a given file identifier.

Progress Monitoring and Pause

During each chunk upload, xhr.upload.onprogress can report the transferred bytes, allowing a progress bar to be updated.

Calling xhr.abort() aborts the current chunk, effectively pausing the upload; resuming follows the same resumable‑upload flow.

The article notes that a full implementation of progress UI and pause/resume controls is omitted for brevity.

Conclusion

While mature SDKs from services like Qiniu and Tencent Cloud already provide complete large‑file upload solutions, understanding the underlying principles—file slicing, resumable logic, and progress handling—is essential for custom implementations or troubleshooting.