Skip to Content
FrontendBundlesCRUDModalsImage

Image Modal

ImageModal provides an upload interface and preview for entity image fields. Supports drag-and-drop, cropping, and aspect ratio constraints.

Import

import { ImageModal } from "@phpcreation/frontend-crud-react-nextjs-bundle/components/ImageModal";

Usage

import { ImageModal } from "...";
 
<ImageModal
  open={imageOpen}
  onOpenChange={setImageOpen}
  uploadUrl={`/api/entities/${entity.id}/image`}
  currentImageUrl={entity.imageUrl}
  aspectRatio={16 / 9}
  onSuccess={(imageUrl) => {
    setImageOpen(false);
    refresh();
  }}
/>

Props

PropTypeDescription
openbooleanModal open state
onOpenChange(open: boolean) => voidOpen state handler
uploadUrlstringAPI endpoint for image upload
currentImageUrlstringCurrent image URL (for preview)
aspectRationumberCrop aspect ratio (e.g., 16/9, 1)
onSuccess(url: string) => voidCalled with the new image URL
Last updated on
PrintHelp