[Solved] Creating a cloudinary signature for API POST call

Thunkable Discuss
, ,
#1

I’m trying to create my own cloudinary upload call using their API. I think I have the url mostly correct but I’m getting this error:

“{“error”:{“message”:“Invalid Signature 6e1086aa. String to sign - ‘eager=w_200,c_crop&timestamp=1609227400.483’.”}}”

There seem to be two different descriptions of how to generate a signature:

https://cloudinary.com/documentation/signatures
https://cloudinary.com/documentation/upload_images#generating_authentication_signatures

I can post the blocks I’m using but it’d be helpful to know if anyone has tried/succeeded in doing this. Otherwise, the blocks aren’t going to mean a whole lot to anyone.

1 Like
#2

Eh, why not…

Screen Shot 2020-12-28 at 11.41.12 PM
Screen Shot 2020-12-28 at 11.41.12 PM1824×1630 349 KB

1 Like
#3

Is this the drag n drop version? You don’t seem to have the media db component.

#4

No. It’s the legacy interface. But I’m avoiding using the media db component because I want to upload a scaled image (i.e. 200 pixels wide) to Cloudinary and the API allows me to do that.

#5

@jaredgibb You mentioned here that you’ve been able to resize images using the cloudinary api. Do you have any advice for me?

#6

I think it’s better to tag him as @nradjt74jatz. I think he’s switched to that account.

3 Likes
#7

@codeswept Thank you, I didn’t realize.

#8

hi @tatiang

Uploading and resizing is simple enough using cloudinary url transition api and/or presets.

I am mentally guessing your projects block diagram.

If my memory serves me well, what may be complex is deleting an asset and syncing your firebase db with the cloudinary assets (if this is indeed what you are doing). Even using nodejs you will need to set up a loop to compare and remove assets not found in the fbdb node. You cannot use the ‘on child removed’ listener because of an anomoly with the way Thunkable handles lists in fbdb. I am unsure is this relates to what you are dabbling in.

I have played a lot with this and I should have many code snippets for you. Are you using node js?

1 Like
#9

@eddie.rebehy Do you have an example of this? It’s my understanding that the Thunkable media db upload block uploads at full resolution and then it’s possible by modifying the cloudinary media url to download/access a scaled version of the image but I don’t see a way to upload a scaled version except through the API which I’m struggling with.

I’m not concerned at the moment with firebase. I happen to be storing and retrieving the media urls using firebase but that’s all working great (except for the delay accessing a large 5-10 MB image file in Thunkable).

I’m not familiar with node js and I don’t have a server. I’ve just been trying to do everything via web urls (APIs). But I’m willing to learn!

1 Like
#10

got it.

fyi. node js can run in firebase functions and doesn’t need a server.

I also have a html/javascript solution that doesn’t need cloudinary or nodejs (uses js canvas to resize). You can use this in web viewer. It has in built file picker.

I will also get some cloudinary transformation blocks to you when I get back to my computer later today.

3 Likes
#11

I know you are more advanced than I am with web API’s but have you looked into ‘eager’ transformations? Check the above link just for starters.

I am having some difficulty finding these functions I previously created. I stopped using Cloudinary for many reasons and subsequently deleted much of my working code. I honestly can’t remember whether I was transforming on the fly or only after upload. But I do vaguely recall that using presets and eager transformations was possible.

Would you like a vanilla javascript solution using javascript canvas?

Edit: Transformations on upload | Cloudinary
I think I did it using nodejs and incoming_transformations. You may be able to do the same with the provided php sdk in your api?

2 Likes
#12

@eddie.rebehy That IS what I’m wanting to do. I did use the eager transformations when accessing photos stored in Cloudinary and that helped speed up the display process:

image
image1112×122 20.6 KB

But when I see something like this node.js command to upload a smaller photo, I’m not sure what to do with it:

cloudinary.v2.uploader.upload("sample.jpg",
  { width: 2000, height: 1000, crop: "limit" },
  function(error, result) { console.log(result, error); });

What block(s) do I use to send that command?

1 Like
#13

Node js code functions reside on the server and you don’t send them as commands. In your case they would reside in Firebase Functions. In short you would create the function/s and deploy to Firebase Functions (this is a small learning curve). You could then call the node js function either via http or by some event listener in the node js script itself such as listening to change in a firebase node.

The challenge here is that the image url is probably on the local device and not accessible to the server. If you are uploading an image from the local device then I would look at resizing using javascript canvas and input Type:File then and storing the png image data directly into firebase storage using the Firebase javascript client SDK. Once you have that you can trigger the Nodejs function to store and use transformations in Cloudinary although that would probably be redundant because you have the image and control directly between Thunkable and Firebase without need for Cloudinary.

The attached file is a good indication of what you may consider instead of Cloudinary. It is perhaps overly complicated by the PDF to image thumbnails and Video first frame Thumbnails.

The file select button is 100% screen size and the canvas and video engines are hidden and not displayed. I use this with Thunkable to select my files from local device and generate thumbnails with original and thumb images stored in Firebase Storage and referenced in Firebase RTDB.

I can look at stripping the code down for you to use as a simple image resizer if you decide to take this further.

Given the perpetual beta issues of Thunkable, I am trying to instead learn more robust and proven methods for production apps such as Ionic/Vue or similar. I am therefore not spending much time here. I am however always on the lookout in the community to try and assist those that have helped me in the past :slight_smile:

Have a look at the txt file and PM me if you want some guidance with this method.

Thunkable_filepicker_image-resize.txt (10.3 KB)

4 Likes
#14

Hi tatiang,
Did you succeed with the blocks using Cloudinary API or go with eddie’s suggestion?
I have spent many days reverse engineering you block code above and learning the power of Cloudiary but just wondering if I am barking up the wrong tree.
My Goal is to upload an image and apply a watermark or edit a previously uploaded image and apply the watermark using blocks.
Also using Thunkable X DnD for learning purposes and only for the prototype.

Ta James

#15

I have the same problem. Any solution?

#16

I haven’t gotten anywhere with this.

#17

Still working on this. It is a merry go round :rofl: I have the signature working but the transformation is not working. I will create a small app to generate the SHA1 and a Curl command when I have it working and share it. Basically there are to many configurations to fight each other as in you have to have Strict = True but then eager does not work???
Now concentrating, when I can, on a crud approach.

1 Like
#18

I have made a cloudinary curl generator to create Curl command lines for testing. They work as far as uploading but the final uploads still are not transformed. I have contacted cloudinary support for advise. Copy the gsheet first so you don’t accidentally give away your secret.

#19

Hi!

That sounds like very impressive, but how do your blocks look? Can you share them, since I am not quite sure how to use that sheet.

Thank you!

#20

I shall. Just want to iron some things out first. But to work out the blocks, you need to know you are passing the correct url to the WEB api. Getting the right signature is the hard bit.

  1. Fill the associated cells
    image
    from you cloudinary account
    image
    image942×360 39.7 KB
  2. Public ID - the final file name. It is option but not in this sheet.
    Eager - the eager string. Easily worked out using cloudinary tools.
    image
    The file is the text url of the image to upload/apply the eager too. Either a local file as lblError here would display file:///storage/emulated/0/Pictures/image-171fd323-fb9f-49dc-966a-4b6820fee39b.jpg) or the url of a uploaded file or external url.
    image
    image811×552 48.7 KB
  3. copy the timestamp (seconds since 1970) and paste as a value in the timestamp copy row.
    image
  4. test the Curl URL, read cloudinary documents and try again.
    image
    image979×88 5.25 KB

When your Curl is working, that will allow you to test your blocks quicker.

Hope this helps.

p.s. my blocks shown are based on tatiang’s great work at the beginning of this thread.

1 Like