# Cloudinary API upload with upload-preset

**URL:** https://community.thunkable.com/t/cloudinary-api-upload-with-upload-preset/3314982
**Category:** Questions about Thunkable X
**Created:** [November 1, 2024, 1:32pm UTC](https://community.thunkable.com/t/cloudinary-api-upload-with-upload-preset/3314982 "2024-11-01T13:32:29Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![tim.casson.smithpc](https://avatars.discourse-cdn.com/v4/letter/t/edb3f5/32.png) [@tim.casson.smithpc](https://community.thunkable.com/u/tim.casson.smithpc)
#### Post date: [November 1, 2024, 1:32pm UTC](https://community.thunkable.com/t/cloudinary-api-upload-with-upload-preset/3314982/1 "2024-11-01T13:32:29Z")

</div>

![blocks](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/7/8/78bba53fe0f0fa22ed365af70263b4c0111d1055.png)

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

---

<div class="post-metadata">

### Author: ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)
#### Post date: [November 2, 2024, 12:13am UTC](https://community.thunkable.com/t/cloudinary-api-upload-with-upload-preset/3314982/2 "2024-11-02T00:13:12Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![tim.casson.smithpc](https://avatars.discourse-cdn.com/v4/letter/t/edb3f5/32.png) [@tim.casson.smithpc](https://community.thunkable.com/u/tim.casson.smithpc)
#### Post date: [November 2, 2024, 10:11pm UTC](https://community.thunkable.com/t/cloudinary-api-upload-with-upload-preset/3314982/3 "2024-11-02T22:11:53Z")

</div>

Looks like Cloudinary API does support base 64 images

> **[Customizing uploads | Cloudinary](https://cloudinary.com/documentation/upload_parameters#required_file_parameter)**
>
> Learn about the required and optional parameters available for customizing your uploads.

> **[Uploading assets using a base64 DATA URI](https://support.cloudinary.com/hc/en-us/articles/203125741-Uploading-assets-using-a-base64-DATA-URI)**
>
> In addition to uploading assets from a local path or a remote URL, Cloudinary supports uploading assets using the Base64 data URI scheme.
> The maximum file size which can be uploaded this way is 60 ...

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

Thanks

TimCS

---

<div class="post-metadata">

### Author: ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)
#### Post date: [November 4, 2024, 5:47pm UTC](https://community.thunkable.com/t/cloudinary-api-upload-with-upload-preset/3314982/4 "2024-11-04T17:47:46Z")

</div>

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

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/2/026022f6df8aa046fcee5f3df424b0b9930934a4.png)

---

<div class="post-metadata">

### Author: ![tim.casson.smithpc](https://avatars.discourse-cdn.com/v4/letter/t/edb3f5/32.png) [@tim.casson.smithpc](https://community.thunkable.com/u/tim.casson.smithpc)
#### Post date: [November 4, 2024, 6:08pm UTC](https://community.thunkable.com/t/cloudinary-api-upload-with-upload-preset/3314982/5 "2024-11-04T18:08:07Z")

</div>

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

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

---

<div class="post-metadata">

### Author: ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)
#### Post date: [November 4, 2024, 8:13pm UTC](https://community.thunkable.com/t/cloudinary-api-upload-with-upload-preset/3314982/6 "2024-11-04T20:13:30Z")

</div>

You could connect a variable on the file field

---

<div class="post-metadata">

### Author: ![tim.casson.smithpc](https://avatars.discourse-cdn.com/v4/letter/t/edb3f5/32.png) [@tim.casson.smithpc](https://community.thunkable.com/u/tim.casson.smithpc)
#### Post date: [November 4, 2024, 9:43pm UTC](https://community.thunkable.com/t/cloudinary-api-upload-with-upload-preset/3314982/7 "2024-11-04T21:43:17Z")

</div>

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

---

<div class="post-metadata">

### Author: ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)
#### Post date: [November 4, 2024, 9:56pm UTC](https://community.thunkable.com/t/cloudinary-api-upload-with-upload-preset/3314982/8 "2024-11-04T21:56:19Z")

</div>

The API body needs to be a JSON.

---

<div class="post-metadata">

### Author: ![tim.casson.smithpc](https://avatars.discourse-cdn.com/v4/letter/t/edb3f5/32.png) [@tim.casson.smithpc](https://community.thunkable.com/u/tim.casson.smithpc)
#### Post date: [November 4, 2024, 11:52pm UTC](https://community.thunkable.com/t/cloudinary-api-upload-with-upload-preset/3314982/9 "2024-11-04T23:52:33Z")

</div>

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

---

<div class="post-metadata">

### Author: ![finbarr.mccarthytl32](https://avatars.discourse-cdn.com/v4/letter/f/96bed5/32.png) [@finbarr.mccarthytl32](https://community.thunkable.com/u/finbarr.mccarthytl32)
#### Post date: [November 6, 2024, 9:12pm UTC](https://community.thunkable.com/t/cloudinary-api-upload-with-upload-preset/3314982/10 "2024-11-06T21:12:19Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![tim.casson.smithpc](https://avatars.discourse-cdn.com/v4/letter/t/edb3f5/32.png) [@tim.casson.smithpc](https://community.thunkable.com/u/tim.casson.smithpc)
#### Post date: [November 10, 2024, 10:32pm UTC](https://community.thunkable.com/t/cloudinary-api-upload-with-upload-preset/3314982/11 "2024-11-10T22:32:43Z")

</div>

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

---

<div class="post-metadata">

### Author: ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)
#### Post date: [November 11, 2024, 10:50pm UTC](https://community.thunkable.com/t/cloudinary-api-upload-with-upload-preset/3314982/12 "2024-11-11T22:50:41Z")

</div>

Hi @tim.casson.smithpc ,  
Could you please try to set the header Content-Type: application/x-www-form-urlencoded like this?  
 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/3/4/34b5d7830de9d8554007affbbe3305d51d3e7de3.png)

---

<div class="post-metadata">

### Author: ![finbarr.mccarthytl32](https://avatars.discourse-cdn.com/v4/letter/f/96bed5/32.png) [@finbarr.mccarthytl32](https://community.thunkable.com/u/finbarr.mccarthytl32)
#### Post date: [November 12, 2024, 10:31am UTC](https://community.thunkable.com/t/cloudinary-api-upload-with-upload-preset/3314982/13 "2024-11-12T10:31:25Z")

</div>

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

---

<div class="post-metadata">

### Author: ![tim.casson.smithpc](https://avatars.discourse-cdn.com/v4/letter/t/edb3f5/32.png) [@tim.casson.smithpc](https://community.thunkable.com/u/tim.casson.smithpc)
#### Post date: [November 12, 2024, 12:03pm UTC](https://community.thunkable.com/t/cloudinary-api-upload-with-upload-preset/3314982/14 "2024-11-12T12:03:12Z")

</div>

@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 ?

---

<div class="post-metadata">

### Author: ![tim.casson.smithpc](https://avatars.discourse-cdn.com/v4/letter/t/edb3f5/32.png) [@tim.casson.smithpc](https://community.thunkable.com/u/tim.casson.smithpc)
#### Post date: [November 12, 2024, 12:04pm UTC](https://community.thunkable.com/t/cloudinary-api-upload-with-upload-preset/3314982/15 "2024-11-12T12:04:31Z")

</div>

@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

---

<div class="post-metadata">

### Author: ![tim.casson.smithpc](https://avatars.discourse-cdn.com/v4/letter/t/edb3f5/32.png) [@tim.casson.smithpc](https://community.thunkable.com/u/tim.casson.smithpc)
#### Post date: [November 12, 2024, 2:46pm UTC](https://community.thunkable.com/t/cloudinary-api-upload-with-upload-preset/3314982/16 "2024-11-12T14:46:46Z")

</div>

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

---

<div class="post-metadata">

### Author: ![brianl](https://avatars.discourse-cdn.com/v4/letter/b/f14d63/32.png) [@brianl](https://community.thunkable.com/u/brianl)
#### Post date: [November 12, 2024, 8:02pm UTC](https://community.thunkable.com/t/cloudinary-api-upload-with-upload-preset/3314982/17 "2024-11-12T20:02:19Z")

</div>

You can use the [JSON from Object block](https://docs.thunkable.com/blocks/blocks/objects#generate-json-from-object) to see what is in API body.

---

<div class="post-metadata">

### Author: ![tim.casson.smithpc](https://avatars.discourse-cdn.com/v4/letter/t/edb3f5/32.png) [@tim.casson.smithpc](https://community.thunkable.com/u/tim.casson.smithpc)
#### Post date: [November 12, 2024, 9:27pm UTC](https://community.thunkable.com/t/cloudinary-api-upload-with-upload-preset/3314982/18 "2024-11-12T21:27:39Z")

</div>

@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?

---

<div class="post-metadata">

### Author: ![tim.casson.smithpc](https://avatars.discourse-cdn.com/v4/letter/t/edb3f5/32.png) [@tim.casson.smithpc](https://community.thunkable.com/u/tim.casson.smithpc)
#### Post date: [November 13, 2024, 4:21pm UTC](https://community.thunkable.com/t/cloudinary-api-upload-with-upload-preset/3314982/19 "2024-11-13T16:21:38Z")

</div>

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

 ![Error message updated](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/d/e/dea3a62de2a1a2b65ad507faa9e5fe17c2239f4b.jpeg)

---

<div class="post-metadata">

### Author: ![brianl](https://avatars.discourse-cdn.com/v4/letter/b/f14d63/32.png) [@brianl](https://community.thunkable.com/u/brianl)
#### Post date: [November 13, 2024, 6:33pm UTC](https://community.thunkable.com/t/cloudinary-api-upload-with-upload-preset/3314982/20 "2024-11-13T18:33:32Z")

</div>

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](https://stackoverflow.com/questions/62957684/upload-preset-must-be-specified-when-using-unsigned-upload-cloudinary)).

[Next page](https://community.thunkable.com/t/cloudinary-api-upload-with-upload-preset/3314982.md?page=2)
