[Feature] Dynamically set Cloudinary Cloud Name (just like UploadPreset)

[reannu123]

Feature Request

Is your feature request related to a problem? Please describe.

The problem I have is when creating docker images, I will need the Cloudinary cloud name at build time. But I want to be able to let users use their own cloudinary accounts if needed.

Describe the solution you'd like

I'm specifically talking about the CldUploadWidgetwhere uploadPreset is passed as a prop, I also want to be able to pass the cloud name

export interface CldUploadWidgetProps {
...
  uploadPreset?: string;
  cloudName?: string; // Additional line
}

and in the component,

const uploadOptions = {
    cloudName: cloudName || process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME, // Additional operand
    uploadPreset: uploadPreset || process.env.NEXT_PUBLIC_CLOUDINARY_UPLOAD_PRESET,
    apiKey: process.env.NEXT_PUBLIC_CLOUDINARY_API_KEY,
    ...options,
  };

Describe alternatives you've considered

I cannot find alternatives, if there is already an existing solution for this, please let me know!

Additional context

This way, users (I meant users using my application) can input their own cloud names and use their cloudinary data somewhere else they want.

[colbyfayock]

yup this makes sense. we're already doing something similar with a config prop on CldImage, though this pattern hasn't been rolled out to all components:

https://github.com/cloudinary-community/next-cloudinary/blob/main/next-cloudinary/src/components/CldImage/CldImage.tsx#L13

the way i would imagine this working is that it would take the same pattern as the CldImage config prop

an issue I forsee with this though is for Signed Uploads which requires an API_SECRET, though i suppose the idea would be that they set their own signing endpoint as well?

Your usage:

<CldUploadWidget signatureEndpoint="/api/sign-cloudinary-params">

Your user's usage:

const config = {
  cloud: {
    cloudName,
    apiKey
  },
};

<CldUploadWidget signatureEndpoint="/api/other-sign-cloudinary-params" config={config} />

does that look right?

[reannu123]

Thank you @colbyfayock, I haven't tried signing uploads but yes this makes sense. My question though is it looks like route.ts would need the cloud_name, api_key, and api_secret, how would those be passed from the CldUploadWidget?

[colbyfayock]

i think the expectation would be that they would need to create a separate endpoint that uses the other credentials. that endpoint is called from within the component and can't really "pass" the credentials to the endpoint from a security perspective

im open to ideas though!

[reannu123]

Ahh I see! I do not understand it well enough yet to give ideas but as long as it makes sense to you then go for it! Thanks @colbyfayock!

[github-actions[bot]]

:tada: This issue has been resolved in version 6.5.0 :tada:

The release is available on:

• pnpm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[colbyfayock]

hey @reannu123 the Upload Widget now supports the config prop. I went ahead and tested setting up a separate endpoint with a different secret, then configured an individual instance to that endpoint along with the cloud name and API key, and it worked out as expected!

let me know if you have any questions

[reannu123]

Hi @colbyfayock just got off work I just updated to 6.5.0 and tested it out and it's working perfectly! Thanks again!