Image export dialogPro

Export generated images: format and quality, size with real pixel dimensions, metadata strip, content credentials with the consequence spelled out, one ZIP or separate files, and an honest size estimate that turns into progress and a result.

Markdown

On this page

ProTwelve images as WebP in one ZIP: format, quality, size, metadata, content credentials and file names, with a scripted export.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/image-export-dialog

Usage

tsx

import { ImageExportDialog } from "@/components/ui/chatcn/pro/image-export-dialog"

<ImageExportDialog
  open={open}
  onOpenChange={setOpen}
  images={selected}
  archiveName={board.name}
  status={job.status}
  completed={job.completed}
  failures={job.failures}
  onExport={(settings) => job.start(selected, settings)}
  onRetry={(ids) => job.retry(ids)}
/>

The dialog is the kit's dialog around ImageExportPanel, which you can also place inline, in a side panel or a settings page. Settings are controlled or uncontrolled through value and onValueChange. The panel does not write files: onExport hands you the settings and you report status, completed and failures back.

The size estimate uses typical bytes per pixel for each format and quality, plus metadata and credentials. estimateExportBytes, exportFileNames and formatBytes are exported from the lib for server use. Repeated file names get -2, -3 so nothing in a ZIP overwrites anything else.

Examples

States

JPEG with transparent images warns what will happen to them. Quality stays in place, turned off, for PNG so the dialog never jumps. A partial failure lists each image with how to fix it and retries only those.

ProOne image as JPEG with transparency, exporting, done with two failures, a failed export and disabled.

Props

Prop	Type	Notes
`images`	`CollectionImage[]`	Required. Width, height and `hasAlpha` feed the estimate
`value`, `defaultValue`, `onValueChange`	`ExportSettings`	`format`, `quality`, `scale`, `stripMetadata`, `keepCredentials`, `packaging`, `pattern`
`formats`	`ExportFormat[]`	Default PNG, JPEG, WebP, AVIF
`scales`	`{ value, label?, disabled? }[]`	Default 0.5, 1, 2 and 4
`maxLongEdge`	`number`	Larger outputs turn off. Default 8192
`credentials`	`boolean`	Show the content credentials row. Default true
`archiveName`	`string`	The ZIP name, slugged. Default `images-<date>`
`status`	`"idle" \| "exporting" \| "done" \| "error"`
`completed`, `failures`, `error`		Progress and results
`onExport`, `onStop`, `onRetry`, `onCancel`
`open`, `defaultOpen`, `onOpenChange`, `trigger`		Dialog only

Keyboard

Key	Action
`Tab`	Move between groups; each choice row is one stop
`←` `→`	Pick a format, size or packaging
`←` `→`, `Page Up`, `Page Down`	Change quality
`Space`	Toggle metadata or credentials
`Esc`	Close; a running export keeps running

Accessibility

Format, size and packaging are radio groups on native radios, named by their row label.
Quality is a native range with a spoken value; for PNG it says Lossless.
Switch descriptions are linked with aria-describedby, so turning off credentials reads its consequence.
Progress is a progressbar with the image count, and the result is announced once in a polite live region.

Motion

Settings change instantly. The footer fades between estimate, progress and result in 150 ms, and the progress fill moves on transform.
The dialog opens in 220 ms from 0.96 and at once when opened from the keyboard.