November 23, 2024
ReactNodeJSExpressNestJSresumabledownloadsHTTPRangeIndexedDBTypeScriptwebdevelopmentfrontendbackendchunkedfilebinaryprogressiveAPI
Loading...
Resumable downloads solve a persistent problem in web applications: large files (such as binaries or archives) are often interrupted due to connection issues, device sleep, or user navigation. Without resumability, any failure forces the user to restart their download from scratch, which is inefficient for both end users and servers.
Modern HTTP servers and browsers support the Range header, which allows partial retrieval of resources. When paired with persistent client storage (using IndexedDB, for example), this enables fully resumable downloads in the browser.
Express and NestJS servers handle HTTP Range headers, serving only the requested byte range of a file, with status 206 to indicate partial content.
A React hook stores partial downloads in IndexedDB, tracks byte offsets, and resumes at the correct point after pause, reload, or disconnect. Once all chunks are downloaded, it assembles the file for the user:
Beyond binary files, this architecture also supports resumable downloads for very large tabular datasets (e.g., tens of thousands of CSV rows).
Instead of requesting byte ranges, the client requests row ranges:
GET /download-csv?startRow=10000&endRow=11999
The server streams the requested rows, with each chunk immediately valid and usable (often including the header for parsing).
The file "size" is now governed by the total number of rows, and the client tracks row index, not byte position.
Persistence, pause, and resume work the same way; each downloaded chunk can be parsed and used for analytics or preview as soon as it arrives, with no need to wait for the entire dataset.
The general resumable download pattern—partial retrieval, persistent storage of state, pause/resume functionality—is broadly applicable beyond static files. For tabular or record-based data, switching from byte-based to row-based chunking improves usability and efficiency, letting users access part of their data immediately while maintaining robust resumability.
This architecture improves reliability, user experience, and resource efficiency for large downloads—whether files or tabular data—across a wide range of web applications.
Check out the GitHub repository for a live demo and complete implementation details.