Cloudinary API upload with upload-preset

Hi all,

I have attached the blocks I am using to upload a photo that has been either taken or chosen from the java script that I was pointed to use to create a base64 image which I then want to A) upload to cloudinary to then use with Google vision. However whatever combination I have tried to use to upload the photo I get a 400 error stating to include the upload_preset which I am doing.

I suspect that this is a formatting syntax issue but cannot find the solution any thoughts on this and I am using the drag and drop builder. I have also added my cloudinary account details under the settings of this project

Thanks

TimCS

Hello @tim.casson.smithpc
Maybe Cloudinary API doesn’t accept an image as base64.
You could try uploading the image to a backend (for example Xano), which will then upload it to Cloudinary.

Looks like Cloudinary API does support base 64 images

However, looking at the first link maybe I have to add those extra parameters for base64?

Thanks

TimCS

Hi @tim.casson.smithpc
According to the docs, the API body needs to be like this:

I’m using an unsigned upload folder so there is no signature

Also if the imsge is in a variable how does that work?

You could connect a variable on the file field

I am doing this and tried two methods

file= + [image64] +
and
file= + image64 +

If this is not the correct method please let me know also I noticed from your example you are using the generate JSON from object block - is there a reason for this? I thought it was just a string with the & separating the fields

The API body needs to be a JSON.

Oh I thought because the header is set to this Content-Type: application/x-www-form-urlencoded that it would not be in JSON format

Hi Tim,
Cloudinary is much simpler than you have outlined. There is no need to code to Base64. You simply need to upload the photo from camera or from the gallery.
When you add Cloudinary to your project, you need to have a Cloudinary account and specify the Cloud Name, API Key, and API Secret in the settings for the project.
Then you simply use the upload file block, specifying the photo you are uploading.
Cloudinary returns a URL and an error.
I use the Xano database, so when saving the photo to Xano, I simply use the Cloudinary URL in the parameters for the Xano endpoint I am using.

There are a number of steps, but it doesn’t involve Base64 encoding or any other complications.

I hope this helps.
Finbarr.

Hi @finbarr.mccarthytl32

Thank you for your reply - I think you may have missed the point here - I am uploading the image as Base 64 because it will then be used with Google vision API which needs the image in this format.

Also I do have a cloudiary account with an API and secret key. I am trying to avoid linking my app to too many different APIs and reading around cloudinary should be able to handle base 64.

Furthermore I have just tried the same logic just by uploading a photo from the camera block and I still get the same error so this is not an issue with the base 64 file more so a syntax error in how to upload an image to a unsigned folder.

Thanks Tim

Hi @tim.casson.smithpc ,
Could you please try to set the header Content-Type: application/x-www-form-urlencoded like this?
image

Can you upload the base 64 image direct to the Google Vision API - does it even need to go through Cloudinary?

@ioannis I did have this set before and I thought you said to set it to JSON but then the way I had apply the header to urlencoded was not through the create JSON object so I will give this ago - thank you for this. Should I also do this for the URL field itself ?

@finbarr.mccarthytl32 it needs to be encoded as base64 before Google cloud can touch it and I read that it needs the image pulled in from a URL plus I am using that earlier post reply to convert the base64 to start with

Tried this with no luck - is there anyway I can check the body of the API after it has been generated through the generate object / JSON method .

I tried to use a label and then used Get object from JSON and attached the api body from there but all I get is [object Object] in the text - I just want to be able to validate what it is creating.

Thanks

You can use the JSON from Object block to see what is in API body.

@brianl Thank you , however I want to see the entire JSON content instead of just requesting one field at a time - how do I see the entire contents of the Body property from this API please?

OK I have managed to get the contents of the JSON contents to a label and can see no issues with what is there so I am still trying to understand why I get this response back from Cloudinary

From looking up that error message, it seems like the recommended thing to check is ‘go to the Settings → Upload tab in your account and verify that the Signing Mode is set to Unsigned for the preset you are trying to use.’ (source).