SmartImageEditor

AI image upload with background removal and multi-variant processing

Simple mode (no spec)

Without a spec prop, SmartImageEditor behaves like a plain upload zone. The picked file is forwarded as a blob URL via onComplete.

Click to upload or drag and drop

PNG, JPG, WebP or SVG (max 5 MB)

Editor mode (with spec)

Pass an ImageProcessingSpec with variants to unlock AI background-removal and per-variant tile grid. Each variant is uploaded independently via uploadEndpoint. This mode requires a server-side image processing route — not demoed here to avoid network calls.

<SmartImageEditor
  spec={{
    bgRemoval: true,
    variants: [
      { name: 'original', label: 'Original', width: 800, height: 600 },
      { name: 'thumb',    label: 'Thumbnail', width: 200, height: 150 },
      { name: 'avatar',  label: 'Avatar', width: 200, height: 200 }
    ]
  }}
  uploadEndpoint="/api/admin/image/process"
  previewUrls={{ original: existingUrl }}
  onComplete={(variants) => saveUrls(variants)}
  onDelete={(name) => deleteVariant(name)}
/>

Props

Prop	Type	Default	Description
`value`	`string`	`""`	Simple-mode output URL (bindable)
`spec`	`ImageProcessingSpec`	-	Variant spec — enables editor mode with AI pipeline
`uploadEndpoint`	`string`	`"/api/admin/image/process"`	Server route that accepts the file and spec
`previewUrls`	`Record<string, string>`	-	Pre-populate variant tiles with existing stored URLs
`accept`	`string`	`"image/png,image/jpeg,…"`	Accepted MIME types
`maxSizeMb`	`number`	`10`	Max file size in MB
`onComplete`	`(variants: VariantResult[]) => void`	-	Called when all variants are processed
`onDelete`	`(variantName) => Promise<boolean>`	-	Called when user deletes a variant tile
`onDirectUpload`	`(name, file) => Promise<VariantResult>`	-	Per-tile direct upload bypass for the AI pipeline