Download Multiple Files as a ZIP in React
Add a multiple-file picker and ZIP download to React with useEazip and EazipTray, including progress, cancel, and retry states.
Let a user pick several browser files and download them as one ZIP. Your
component owns the selection; <EazipTray /> renders progress, cancel, retry,
partial results, and the finished download.
Before you start
npm install @eazip/reactBuild the React component
'use client';
import { useState } from 'react';
import { useEazip, EazipTray } from '@eazip/react';
export function FileZipDownload() {
const [files, setFiles] = useState<File[]>([]);
const zip = useEazip();
return (
<section>
<label>
Files to download
<input
type="file"
multiple
onChange={(event) =>
setFiles(Array.from(event.currentTarget.files ?? []))
}
/>
</label>
<button
type="button"
disabled={files.length === 0 || zip.isBusy}
onClick={() =>
zip.download({
files,
zipName: 'selected-files.zip',
})
}
>
Download {files.length || ''} files as ZIP
</button>
<EazipTray />
</section>
);
}zip.download() starts the Local job from the File objects held in React
state. zip.isBusy keeps the button disabled while that job runs.
Fit it into an existing application
- Keep one
<EazipTray />near the application root when several components start downloads. - Pass
{ file, filename }objects when you need folders or renamed entries. - Use the headless hook state only when ZIP status must fit an existing panel or toolbar.
Files never leave the browser in this Local workflow. Remote URLs must be browser-readable through CORS, and large remote jobs can switch to Cloud.
Next, learn how to download selected application files or show custom progress and retry controls.