cloudinary / cloudinary-react

React components that utilize Cloudinary functionality
MIT License
502 stars 219 forks source link

Allow private requests for publicly allowed transformations #217

Closed victorcarvalhosp closed 3 years ago

victorcarvalhosp commented 3 years ago

Feature request for Cloudinary React SDK

Allow private requests for allowed transformations

Explain your use case

I'm setting my images as "Private media assets", but allowing transformations of my assets - When I use the react component it always get the public URL and not the private one - so the transformations don't work in this case.

This is the way that I`m using the component

<Image cloudName="webalys" publicId="/icons/low/subc_bNS2UjfHufcISFyZ/Atomic-Bomb-8nug00vfq7rvmkdu9enmz" fetchFormat="png" secure="true" />

And the component is generating the following URL: https://res.cloudinary.com/webalys/image/upload/f_png/v1/icons/low/subc_bNS2UjfHufcISFyZ/Atomic-Bomb-8nug00vfq7rvmkdu9enmz

But the correct(and public after applying the f_png transformation) URL should be: https://res.cloudinary.com/webalys/image/private/f_png/v1/icons/low/subc_bNS2UjfHufcISFyZ/Atomic-Bomb-8nug00vfq7rvmkdu9enmz

The original image is still correctly inaccessible, as it's private: https://res.cloudinary.com/webalys/image/private/v1/icons/low/subc_bNS2UjfHufcISFyZ/Atomic-Bomb-8nug00vfq7rvmkdu9enmz.svg

Describe the problem you’re trying to solve

My original file should be private and not accessible from the reactjs component, but transformations of the private file should be accessible through the component

Do you have a proposed solution?

maybe a "private" attribute that works for this case?

eyalktCloudinary commented 3 years ago

Hey @victorcarvalhosp, Thanks for reaching out! I've also answered within the ticket you have with us, and I'll answer here as well, in case other clients encounter this -

When creating using an component, the delivery type is defaulted to "upload", and that's why the URL is created with "upload" type (.../image/upload/...). You can override the default type with the type attribute, i.e -

<Image cloudName="webalys" type="private" publicId="/icons/low/subc_bNS2UjfHufcISFyZ/Atomic-Bomb-8nug00vfq7rvmkdu9enmz" fetchFormat="png" secure="true" />

This generates this URL - https://res.cloudinary.com/webalys/image/private/f_png/v1/icons/low/subc_bNS2UjfHufcISFyZ/Atomic-Bomb-8nug00vfq7rvmkdu9enmz

Cheers!