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.

[barhouum7]

I just encountered a similar issue when clicking on an upload image button inside the Shadcn UI dialog. The Cloudinary upload widget appears above the dialog, but I can't interact with any of its elements. When inspecting the DOM, I noticed that the dialog's elements are still capturing the interactions, even though only the Cloudinary upload widget is visible. Clicking anywhere causes both the widget and the dialog to close.

It seems that the Cloudinary upload widget is affected by the dialog's stacking context, causing it to be rendered behind the overlay. My simple fix was to create a custom modal using motion.div that sits outside the dialog context, which resolved the issue.

Example:

        {isModalOpen && (
                <motion.div
                    initial={{ opacity: 0 }}
                    animate={{ opacity: 1 }}
                    exit={{ opacity: 0 }}
                    className="fixed inset-0 bg-background/30 backdrop-blur-sm z-50 flex items-center justify-center"
                >
                    <div className="gap-4 border bg-background rounded-lg shadow-lg max-w-xl md:max-w-3xl max-h-[420px] md:max-h-[450px] mx-8 md:mx-0 overflow-auto">
                        
                        <div className="sticky top-0 left-0 right-0 h-fit w-full bg-background z-50">
                            <div className="flex items-center justify-between py-4 px-4">
                                <div className="flex flex-col mb-4 gap-y-2">
                                    {/* Title */}
                                    <h1 className="text-4xl font-semibold text-gray-900 dark:text-gray-100">
                                        Your Title
                                    </h1>
                                    <p className="text-gray-500 dark:text-gray-400 font-medium text-[1rem]">
                                        Your description ....
                                    </p>
                                </div>
                                
                                <Button
                                    variant={'ghost'}
                                    size={'sm'}
                                    onClick={() => setIsModalOpen(false)}
                                    className='p-2'
                                >
                                    <X className='w-6 h-6' />
                                </Button>
                            </div>
                        </div>

                        <div className="flex flex-col items-center space-y-6 p-4">
                             <YourContenthere />
                        </div>
                    </div>
                </motion.div>
            )}

[RonAlmog]

still having this issue. I see the workarounds, they are not pretty or easy. so bottom line is, you can't use the cloudinary upload widget inside shadcn/ui modal. that sucks. i'm still looking for solutions.

[barhouum7]

It's not hard to build your custom modal as I mentioned here: #3234 (comment)