Cloudinary via API using Kodular (without using Cloudinary Extension) using multipart/form-data HTTP POST via Kodular Web Component

Discuss
1

Can you tell me about A guide to uploading images to Cloudinary via API using Kodular (without using Cloudinary Extension) using multipart/form-data HTTP POST via Kodular Web Component.

2

can you follow this?


When ButtonUpload.Click do:
   Call ImagePicker1.PickImage

When ImagePicker1.AfterPicking do:
   Set Web1.Url to "https://api.cloudinary.com/v1_1/<cloud_name>/image/upload"
   Set Web1.RequestHeaders to create empty dictionary
   Set Web1.RequestBody to create dictionary with:
     "file": ImagePicker1.ImagePath
     "upload_preset": "<your_upload_preset>"
     "api_key": "<your_api_key>"
   Call Web1.PostText

When Web1.GotText do:
   If Web1.ResponseCode = 200 then
       Set jsonResponse to Web1.ResponseContent
       Set uploadURL to get "url" from jsonResponse (use the `JSONTextDecode` block)
       Set LabelStatus.Text to "Upload successful! Image URL: " + uploadURL
   Else:
       Set LabelStatus.Text to "Upload failed! Error: " + Web1.ResponseContent

How to Set Up an Upload Preset in Cloudinary:

  1. Go to Cloudinary’s Dashboard:
  • Log in to your Cloudinary account.
  1. Navigate to Upload Settings:
  • On the left sidebar, click on “Settings”.
  • Go to the Upload tab.
  1. Create a New Upload Preset:
  • Scroll down to Upload Presets and click on the Add Upload Preset button.
  • You will be prompted to configure the preset. You can leave most options as they are or customize them based on your requirements, like allowed file types, image transformation settings, and more.
  1. Set the Preset Type:
  • Ensure the preset is set to “Unsigned” (as you’re not using an API secret).
  1. Save the Preset:
  • After setting up your preset, save it, and you’ll be given the upload preset name (this is the value that you will use in your Kodular project).

Note: You should use the same namespace in the dictionary mode

1 Like
3

Unable to find Web1.RequestBody in web1 block

4

Request headers was mistyped as body

5

As the PostText method is used in this example, the body is the text of that method

Screenshot_20260130_092156_DuckDuckGo
Screenshot_20260130_092156_DuckDuckGo917×244 37.8 KB

Taifun

6

Thanks, will save and do at some later time. currently I’ve been moved to Firebase storage, it offers upto 5GB of free space in Blaze plan.

7

what to attach in PostText method? Have you generated above code with Ai? Have you tried this yourself?

8

No no no no no​:thinking::worried:

What’s exactly going on :smiling_face_with_three_hearts:

Am off​:pensive_face:

9

Now what?

image
image800×182 23.2 KB

10

Sorry, I’m just reading the original question

As the web component does not support multipart/form-data it will not work like this

Try one of the following extensions

Taken from the extensions directory App Inventor Extensions | Pura Vida Apps

Taifun

2 Likes
11

As of now, these 3 extension does worked to upload media on cloudinary

12

finally made it work with ApiUtils Extension

13

I made it work using ApiUtil Extensions ApiUtils | Multipart/form-data Integration and File Uploads Made By Glich

replace the CLOUD_NAME and PRESET_NAME with you details. Also you can add API and Secret in formData dictionary.

A visual programming interface code snippet that selects an image, modifies its file path, and sends it via an API request while updating UI elements based on the response. (Captioned by AI)
A visual programming interface code snippet that selects an image, modifies its file path, and sends it via an API request while updating UI elements based on the response. (Captioned by AI)924×499 62.9 KB

Thanks to @Taifun for suggesting the extension :handshake:

3 Likes