trigger alert dialog modal without clicking on the button

[epaitoo]

I want to trigger the Alert Dialog without clicking on the button. My use case is when a file is successfully uploaded the modal should display.

This is my code below:

// Alert Dialog component
interface modalProp {
  showModal: boolean
}
const ProductNameModal = ({ showModal }: modalProp) => (
  showModal && (
    <div className="flex flex-col items-center w-full mb-20">
      <AlertDialog>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
            <AlertDialogDescription>
              This action cannot be undone. This will permanently delete your
              account and remove your data from our servers.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction>Continue</AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  )
);

//upload
const DropZoneComponent = ({ onUploadSuccess }) => (
  <UploadDropzone
    uploader={uploader}
    options={uploaderOptions}
    onUpdate={(file) => {
      onUploadSuccess(file[0].fileUrl);
    }}
    width="400px"
    height="300px"
  />
);

it is used in this component:

export const ImageGenerator = () => {
  const [hasUploaded, setHasUploaded] = useState(false);
  const [originalImage, setOriginalImage] = useState(null);
  const [showProductNameModal, setShowProductNameModal] = useState(false);

  const handleUploadSuccess = (fileUrl) => {
    setOriginalImage(fileUrl);
    setHasUploaded(true);
    setShowProductNameModal(true);
  };

  return (
    <div className="flex flex-col items-center w-full mb-20">
      {!hasUploaded && <DropZoneComponent onUploadSuccess={handleUploadSuccess} />}
    </div>
     <ProductNameModal showModal={showProductNameModal} />
  );
};

So from the code, I want to the Alert dialog modal to show after a successful upload, but it does not trigger the alert dialog after the upload. Is there something I'm missing to achieve this?

[adham618]

you can control the dialog with state
<AlertDialog open={showModal} onOpenChange={setShowModal}>..
https://www.radix-ui.com/docs/primitives/components/alert-dialog

[epaitoo]

It works as it suppose to. Thanks