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. 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. It handles processing, cancel, retry, partial output, completion, and Cloud expiry without additional state.

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