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