Open cloudinary upload widget inside a Shadcn UI dialog

[udohjeremiah]

I've tried all different way to implement this, but each way just doesn't work.

The UI I want to try and achieve is that an original dialog should be open. And then when a user clicks on an upload image button then another dialog should be rendered on top of the old dialog (which of course Shadcn UI can do). But I want the Cloudinary widget to be opened inside this newly opened dialog, which sadly doesn't. The behaviour I currently have is that when the new dialog is opened. It's empty and then when I close it, the cloudinary widget flashes and also closes, taking me back to the old dialog. Any help on this?

const [open, setOpen] = useState(false);

<Dialog open={open} onOpenChange={setOpen}>
  <DialogTrigger asChild>
    <Button>
      Upload Image
    </Button>
  </DialogTrigger>
  <DialogContent>
    <CldUploadWidget
      uploadPreset="....."
      onClose={(result, { widget }) => {
        widget.close();
        setOpen(false);
      }}
      onSuccess={(result, options) => {
        console.log("Public ID", result);
      }}
      >
        {({ cloudinary, widget, open, results, error }) => {
          widget?.open();
          return <></>;
        }}
    </CldUploadWidget>
  </DialogContent>
</Dialog>

[yousefhosny1]

Did you manage to find a way, i'm also facing this issue

[udohjeremiah]

I did find a way which was just giving it up.

That aside, I found a way to load the cloudinary dialog widget from the shadcn-ui dialog (it isn't the best). So the algorithm I went with was placing the widget outside the shadcn-ui dialog, then with a button inside the shadcn-ui dialog trigger the cloudinary widget. And when the cloudinary dialog widget is closed, reopen the shadcn-ui dialog. But the UI was inconsistent with this.

You see how bad that style is, which was a major reason I just gave it up as the code didn't smell good for me style.

[stevenluongo]

Also facing this issue.

[hgao1604]

I have implemented a solution to handle interactions with an iframe created by upload widget using two main steps:

1. Non-modal Setting: I've set the Dialog to non-modal with <Dialog modal={false}>. This change disables the modal overlay, which normally prevents interactions with elements outside the Dialog. The primary reason for this setting is to enable interactions with the iframe created by the widget without hindrance.

2. Handling Outside Interactions: To prevent the Dialog from closing when interacting with the iframe outside the dialog content area, I've used <DialogContent onInteractOutside={(event) => event.preventDefault()}>.

This implementation is a trade-off as it may reduce the isolation and focus that a modal Dialog typically provides. While it allows for interaction with the iframe, it also means the Dialog won't close automatically when clicking outside, potentially leading to a cluttered user interface if the user forgets to close it manually.