Guides
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.
This guide adds a Download as ZIP action to a list of browser File
objects. Eazip handles the archive and download state; your component owns the
selection.
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
- A
Setstores selected IDs without duplicating them. downloadSelectedmaps only those items to Eazip source objects.filenamecontrols each path inside the ZIP.- The 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;
large URL selections can use Eazip Cloud without changing the selection UI.
See Inputs and sources for naming and URL rules, or add custom progress controls.