Cloudinary API upload with upload-preset

@brianl Already checked that when I first got this error and also created another upload_preset unsigned and tried that too - still no luck. I have also tried changing the content-type to application/json but still get the same error message.

Really want to get this part working as it is holding up the progress of it. Unless there is a working way to use an API to convert image to base64 with a URL as Google Vision API loads the image from the URL.

Here attached are the two presets

Are you using Google Vision to directly pull from Cloudinary or how are you going to get the images from Cloudinary to Google Vision?

It looks like you are using the Web Viewer Receives Message block. Are you putting your own website/code in the Web Viewer?

Where is the image coming from? It is a file from the photo library or is it a photo taken with the app?

Hi @brianl I think I know what the problem is , I am UK based and although I have tried the URL with https://api-eu and even https://api-ap it still does not work . I have been running curl commands with the same parameters , this gets me the same error message so I know its something to do with the URL or another missing parameter .
Attached is the block I am using and also here is one of the curl commands I have been testing it with;

curl “https://api.cloudinary.com/v1_1//image/upload” -H “Content-Type: application/x-www-form-urlencoded” -X POST --data ‘file=C:\Users\tim\Documents\Tim\Apps\Thunkable\Photo2BabyName\test_image.jpg&upload_preset=Thunkable_Photos’

After some work I got the cURL command to work - when connecting to cloudinary directly the URL has to comprise of your API key and API secret as follows:

curl https://<apikey>:<apisecret>@cloudinaryurl -X POST -H “Content-Type: application/json” --data-binary @upload.json

It seems that when I tried to enter a json string directly at the prompt it did not work so I used a file to hold the info. Also I have found that uploading an image this way , the source of the image HAS to be a URL NOT a local file. Unfortunately Thunkable Camera stores the location of the image taken by the camera locally and this is rejected .

Now as a test I used the same http source of the image in the upload.json file within my Thunkable app to prove that it would work. Sadly it does not and I suspect this is something to do with the way the JSON file is formatted through thunkable as it is as though it does not see or read the upload_preset parameter even though it is included.

I really want this app to work and I want to use Thunkable as I have been a long term user of this platform now - watched it grow over the years too.

So just to recap this is my goal to this app (without giving too much away :slight_smile: )

Takes a photo or picks from the gallery
Sends photo to Google Vision AI or similar to create a JSON file with the features of the face.
Then sends that JSON file to another API to bring back a specific result (Sorry to be vague this is the secret part)

Thanks Tim

Hello @tim.casson.smithpc
You could call the APIs using a backend for example Xano. This way you just need to call Xano API from the Thunkable app.

Is it necessary then to have the photo uploaded to Cloudinary? Just going based off the goal that you wrote, I think Cloudinary could be skipped, especially if it is difficult. Ideally, we can get it working but if the idea is to take a photo (from either the camera or gallery), would it not be easier to format it either manually, API, or custom js and then send it to Google Vision AI?

Hi @brianl from my understanding google vision needs to find the image file from an URL not from a e.g. local (computer location).

In the end I decided to skip trying to access cloudinary directly this way and use the built in method of uploading the file - not what I wanted to do as I would have prefered being able to store the uploaded image file in a specific folder.

Also this is another issue - converting the file to base64 - although a way of doing this was provided - it uses an external js script and I do not like the way this works and how it interacts with the end user. I have been looking at alternatives to Google vision and working on using another AI image API but unless there is a better cleaner way to get an image to be converted to base64 this is my next step for this app.

@ioannis I tested the upload method with a non base64 file using the direct API and it still does not work – sorry I thought I had already mentioned this plus Cloudinary does mention in their docs that they do support the upload of base64.

Odd to ask this but is the integration with cloudinary and thunkable overwriting or conflicting with these attempts to try and use it directly ?

Reason for asking is that I can run a curl command successfully to connect and upload an image to Cloudinary but using the same logic in Thunkable I still get the same error upload preset message