Download Selected Files as a ZIP in React
Turn selected gallery, asset picker, or document items into one browser-generated ZIP with React and EazipTray.
Add a Download as ZIP action to a list of browser File objects. Your
component owns the selection; Eazip owns the archive and its download state.
Before you start
- Complete the React basics.
- Have an array of items containing a stable ID, display name, and
File.
Build the selection and download
import { useState } from 'react';
import { useEazip, EazipTray } from '@eazip/react';
type GalleryItem = {
id: string;
name: string;
file: File;
};
export function Gallery({ items }: { items: GalleryItem[] }) {
const [selected, setSelected] = useState<Set<string>>(new Set());
const zip = useEazip();
const toggle = (id: string) => {
setSelected((previous) => {
const next = new Set(previous);
if (next.has(id)) {
next.delete(id);
} else {
next.add(id);
}
return next;
});
};
const downloadSelected = () => {
const files = items
.filter((item) => selected.has(item.id))
.map((item) => ({
file: item.file,
filename: item.name,
}));
zip.download({
files,
zipName: 'selected.zip',
});
};
return (
<>
<ul>
{items.map((item) => (
<li key={item.id}>
<label>
<input
type="checkbox"
checked={selected.has(item.id)}
onChange={() => toggle(item.id)}
/>
{item.name}
</label>
</li>
))}
</ul>
<button
disabled={selected.size === 0}
onClick={downloadSelected}
>
Download as ZIP
</button>
<EazipTray />
</>
);
}How it works
| Piece | Role |
|---|---|
Set of IDs | Stores the selection without duplicates |
downloadSelected | Maps only selected items to Eazip source objects |
filename | Controls each path inside the ZIP |
| Disabled button | Prevents an empty job |
<EazipTray /> | Handles progress, cancel, retry, and completion |
Use remote items instead
Replace file: File with url: string, then map each item to
{ url: item.url, filename: item.name }. Local URL jobs require browser CORS,
and large URL selections can move to Eazip Cloud without changing this
selection UI.
See Inputs and sources for naming and URL rules, or add custom progress controls.