Build a Drag-and-drop file uploader with configurable chunk size

Question

Accepted Answer

## Building a Chunked Drag-and-drop File Uploader in React **Mental model:** A drop zone accepts files via drag-drop or a file input. Each file is split into chunks of a configurable size (`ceil(size / chunkSize)`); you upload them sequentially, advancing a per-file progress bar. Here uploads are simulated with timers, but the chunk loop is the real shape — it's what enables resumable/parallel uploads. ### Step 1 — Drop zone + file input `dragover` must `preventDefault` to allow the drop. ```jsx

e.preventDefault()} onDrop={onDrop}> add(e.target.files)} />

``` ### Step 2 — Model files with chunk counts ```jsx const add = (fileList) => { const next = [...fileList].map((f) => ({ id: uid(), name: f.name, size: f.size, sent: 0, total: Math.max(1, Math.ceil(f.size / chunkSize)) })); setFiles((cur) => [...cur, ...next]); next.forEach(upload); }; ``` ### Step 3 — Upload chunks sequentially ```jsx const upl

Build a Drag-and-drop file uploader with configurable chunk size

Understand the problem

Attempt it yourself

Stuck? AI Nudge Available

Study the solution

The solution is waiting

React solution

Join the discussion

Discussion (0)