1. Home
  2. Tutorials
  3. Working with APIs
  4. Send an Image to an API

Send an Image to an API

photo save capture

You can send an image to an API from your Dropsource app. Your image can come from inside the app, or elsewhere on the user device, such as the camera or gallery. In order to receive the image, your API can be set up to receive either base 64 encoded image strings, or file types via multipart form data.

  1. Add an Image Element to a page in your app. You can set the Image Asset in Properties by uploading an image manually into your project, or if you want to let the user upload their own image, use either the Take a Photo / Pick an Image Action on Android, or the Select Image from Photos Action on iOS (it allows you to select from the camera or photo library).
    • Depending on your app use case, you might need to display the photo chosen by the user in the app – add a Set Value Action to the nested Image Chosen Event, selecting the Image and the photo chosen, via the Event Data. show chosen image
  2. To send the image as a Base 64 encoded string, your app will need to encode the image and store it in a variable to send with the API request. In Page Variables on the right of the editor, create a new variable, with a name of your choice and Swift/Java String type. image var
    • Add an Action to encode the image when it’s ready (make sure it’s before you use the Run API Request Action to execute the request). Use the Base64 Encode Image Action, selecting the Image (e.g. from the Element it’s displayed in). encode image
      • In the nested Encoded Event, add a Set Value Action, setting the Page Variable with the encoded image value, via the Event Data. encoded image
  3. Add the API request that receives the image. In the Parameters, find the field that expects the image string. If you’re sending it as a Base 64 encoded string, bind the field to the Page Variable you created. image parameter
    If you’re sending the image as a file type via multipart form data, you can bind the field directly to the Image Element on the Canvas.

When your request runs, it will send the image as a parameter. For a complete example of sending images to an API, check out the Photo Saver example app. You can also display images from API responses, including arrays.

Was this article helpful to you? Yes No

How can we help?