use inlineContainer with CldUploadWidget

[colbyfayock]

Discussed in #560

^{Originally posted by gabriel-mopereira October 30, 2024}
Is it possible to use the component always rendered inside the page or do I have to manually create the widget (i.e not using this library components)?

[gabriel-mopereira]

Hey, I think I might have come with a workaround for this, which is basically:

{typeof children === "function" && children({ cloudinary: cloudinary.current, widget: widget.current, results, error, isLoading: isScriptLoading, ...instanceMethods, })}
First I commented this out. In my particular code it wasn't necessary and the only use would be the open function, but it kept saying that open was undefined. I'm aware this is important to many but I don't know how I could make this work.

function createWidget() { return cloudinary.current?.createUploadWidget(uploadOptions, resultsCallback); }
Changing createUploadWidget to openUploadWidget, so it creates the widget and open it automatically.

And finally I used the inlineContainer as usual, but only "#container-id" worked. When using the document.getElementById method, it made the Widget popup in a modal.

I know this is not ideal, I would like to contribute but I'm sure how it should be done.

[colbyfayock]

i would suggest checking for the existence of inlineContainer and handling it differently depending on that

further, an alternative approach, is to add an inline prop, which instead of forcing someone to manually define these values, could return an element somewhere which would act as the inline container

we would then set the inlineContainer ourselves and change any logic to open the widget based on that nested location

does that make sense?