Show ZIP Progress and Let Users Cancel or Retry

Show ZIP progress in React, let users cancel active work, and retry failed downloads with EazipTray or useEazip.

<EazipTray /> is the recommended default: it renders processing, cancel, retry, partial output, completion, and Cloud expiry without additional state. Build custom controls only when ZIP state must live inside an existing panel, toolbar, or product workflow.

Use the built-in tray

Render one tray near the root of the application, wherever downloads start.

const zip = useEazip();

zip.download({ files });

return <EazipTray />;

Build focused custom controls

ExportControls.tsx

import { useEazip } from '@eazip/react';

export function ExportControls({ files }: { files: File[] }) {
  const {
    task,
    isBusy,
    download,
    cancel,
    retry,
  } = useEazip();

  const progress = task?.progress;

  return (
    <section aria-label="ZIP export">
      <button
        disabled={isBusy}
        onClick={() => download({ files })}
      >
        Download as ZIP
      </button>

      {task?.state === 'processing' && (
        <>
          <p role="status">
            {progress
              ? `${progress.filesCompleted} of ${progress.filesTotal}`
              : 'Preparing ZIP…'}
          </p>
          <button onClick={() => cancel(task.id)}>
            Cancel
          </button>
        </>
      )}

      {task?.state === 'failed' && task.canRetry && (
        <button onClick={() => retry(task.id)}>
          Retry
        </button>
      )}

      {task?.state === 'partial' && (
        <p>{task.skippedCount} files were skipped.</p>
      )}
    </section>
  );
}

Local jobs expose file and byte progress. Cloud jobs currently expose processing state through polling, but not per-file progress.

Understand the actions

Action	Local	Cloud
`cancel()`	Stops browser fetching and ZIP creation	Stops this client and removes the task; the server job may continue
`retry()`	Starts the retained request again	Reuses a retained URL request when available
`downloadAll()`	Downloads every split Local ZIP	Downloads every Cloud ZIP output

task.canRetry is the source of truth for showing a retry action. A restored backend-created session may resume, but cannot recreate its original callback after a reload.

For complete task fields, see the React Reference. For headless rendering patterns, see Headless usage.

Show ZIP Progress and Let Users Cancel or Retry

Use the built-in tray

Build focused custom controls

Understand the actions

On this page