[Solved] Creating a cloudinary signature for API POST call

I received a excellent reply from Cloudinary support. It’s taking me a bit of time to decipher :rofl:

-----8<--------
Thanks for contacting us, and for letting me know what you’ve tried and where you’ve looked for an answer already (that’s unusual, and appreciated!)
At a high level, there are two things it’s important to be aware of regarding how Strict Transformations works, which are that 1) Strict transformations affects what methods can create a new derived image in your account without some additional authentication being provided, and
2) Strict transformations doesn’t directly affect how an existing derived image can be accessed, nor how the original file can be accessed
A related concept to mention again is ‘derived asset’ - a common use-case for Cloudinary is that you upload original assets to us, then on your website or application you use a URL that tell us to return that asset, with some transformations applied in the URL, and the version with the transformations applied is called a ‘derived’ asset.
If I understand you correctly, you’d like to create a watermarked copy of an image, allow users to see that watermarked copy, but it shouldn’t be possible for them to see the original asset without authentication, or to change the watermark / add other options. Additionally, you’d prefer to hide what the transformation options used were.
In that case, here’s what I recommend
• Upload the original assets with type ‘private’, so that the original can’t be accessed without a signature, but existing derived assets can be accessed publicly: Media Access Control and Authentication | Cloudinary
• Enable Strict Transformations on your account: Media Access Control and Authentication | Cloudinary
• Create a named transformation in your account which applies the watermark, and also resizes the image to the size you need it for your application (I also recommend adding ‘q_auto: good’ as the quality setting to reduce file size further): Chained and Named Image Transformations | Cloudinary
• In your upload call, or upload preset, request that the watermarked copy is created via an eager transformation
• Alternatively, use the explicit() API method to create a derived version using that named transformation, if the files have already been uploaded
• Alternatively, if all the images will have the same watermark, ‘allow’ the named transformation in your account settings, which will allow new derived images to be created “on the fly” if they use those transformation options
• Use the URL of the watermarked copy in your application or website
With that strategy, users will see the name of the named transformation in the URL, but not the options inside that named transformation, and they won’t be able to access the original file by removing the transformations, or change the transformation options to remove the watermark
May I ask you to please take a look and see if that helps?
Regards,
Stephen
Developer Support Engineer
Customer Success team
Cloudinary UK

1 Like

I have updated the generator to include a private overload. What Stephen suggested works for me (as in theory). Save as private and share a signed link including a named transformation. This way I can share the image, scaled and watermarked, and the end user cannot access the original image.

image

I’ll set up a Cloudinary Generator app soon. So you can 1. generated a curl example and 2. inspect the blocks.

Ta
James

I’ll set up the generator app when the current project is ready for live testing. Here are some working blocks.




Uploading as private allows for derived image urls links can be shared so no eager transformation required
image

I hope these can assist others.

James

2 Likes

Thanks @japa6225a - this is really thorough and very helpful. Thanks for sharing this with the Community! :+1:

Could you share the link

I would mate but what worked one day, didn’t the next. I decided to try a different way to get the Signature as this is the bit I had the most issues with just like some other. When I have a constant version, I will create a demo app. If only Thunkable had SHA1 encryption included.
I do know that I am using Cloudinary for a purpose it is not really designed for but these challenges drive me. Mostly mad but drive me :rofl:

2 Likes

Good luck! I am really looking forward to your result as well. :joy:

Think I finally have it @tatiang, @skulamester and others.
Using Convert Curl to HTTP Request yesterday I realised that the hashify was not returning the right hash from the url parameters using thunkables webapi url alone. Add the header and the text to as the body and fist pumps. Still testing but the first 10 or so have worked :grin: :crossed_fingers:

2 Likes

Hi @japa6225a!

Thank you for your research and sharing all the results with us, but I have a question. The eager does not work for me, I want a 200x200 image to be uploaded, but I hadn’t succeed. I hope you have some idea.

My blocks:

What I get:
image

1 Like

Yes. This I have found out too (haven’t been successful yet). Cloudinary is designed for web based applications. Yes, you can upload but the eager is used for showing the uploaded image on your site/app. So we have been trying to use cloudinary for image editing when it is only a transformation. Just today I finally got a new error, “file:///” url is not supported? FFS. So I am now back to image
and then use the returned url to make a new image to make it a private image. Then in the response, there are 2 url’s which I grab the Secure URL and add a preset transformation. In this case, resized for quicker download and watermarked. https://res.cloudinary.com/meatoff6/image/private/s--zGMYLsFr--/t_MOTsel50p/MO6-Thirsty_Chiefs_Meatoff-MeatOff_team_1-a-Hand_in-1619512510.jpg
Another one I realised today (brain is getting slower :frowning: ) is the web api is asynchronous. @tatiang this might help your initial issue too if you haven’t found it already.
Wrapping Asynchronous (then do) blocks into a Synchronous Function resolves unpredictable results
With resizing, I have seen some say to add the image to a canvas and then resize but have not tried that one yet.

I am facing the same problem as well.

I tried this thing and solves all of my problems! Amazing!

1 Like

Hello. I didn’t understand how the problem was solved “file:///” url is not supported. Can you help me with more details?

What is it you’re trying to do? Are you wanting to transform an image stored in Cloudinary? Or make a transformation when an image is uploaded? Or something else?

I’ll admit to not understanding all of this post but… have you tried this method?

To date I take photos and through MEDIA_DB I upload to cloudinary. I needed to delete the photos on cloudinary. With a little research on the community I can now upload and delete if the image is on https: /// … but if it comes from a photo taken with a mobile phone or from an image gallery I have this error:

But if you’ve uploaded the image to Cloudinary, then you have a cloud-based url for that image. You wouldn’t be able to delete a photo stored on a phone using the Cloudinary API. The photo has to be stored in Cloudinary. You shouldn’t be using a file:/// url at all.

yes, but to speed things up, I would like to upload and delete with api_cloudinary. and the API upload files with https: // and not local files. I wanted to know if it was possible to remedy. Because alternatively I upload with cloudinary and delete with cloudinary api, of course.

1 Like

You can use the Camera/Media blocks to allow the user to upload photos to Cloudinary. But I don’t know of a way to use the API to upload a photo directly from the phone.

2 Likes

OK, all right!

1 Like

@Dario_Cappello
See this post

Thanks muneer, I try this modification now!

2 Likes

@muneer has a great solution linked there

Here’s another (slightly more advanced but alternative solution) for you @Dario_Cappello

1 Like