Image capture input

An input for capturing photos from a device camera, with an optional caption on each image. Use it in flows where a user needs to take a picture, such as a site inspection or a delivery proof.

ctx.ui.inputs.imageCapture("name", config);

Config

The name of the input. This will be the key in the result object.

The label of the input. If this is not provided, the name will be used as the label.

The help text of the input.

Whether the input is optional. Inputs are required by default.

Whether the input is disabled.

Whether to capture a single image or several. Default is "single".

Controls the caption field on each image. Default is "optional".

• "disabled" turns captions off, so users only capture an image.
• "optional" lets users add a caption but does not require one.
• "required" rejects a submission whose caption is empty.

Minimum number of images required (multi mode only). Only applied when the submission is not empty.

Maximum number of images allowed (multi mode only).

Usage

Add the input to a page. The result is keyed by the input name.

Single image

In single mode the result is one entry with the captured file and its caption.

const result = await ctx.ui.page({
  title: "Site inspection",
  content: [
    ctx.ui.inputs.imageCapture("photo", {
      label: "Site photo",
      helpText: "Take a clear shot of the unit",
      caption: "required",
    }),
  ],
});
 
console.log(result.photo.caption);
// "front of unit"

Multiple images

In multi mode the result is an array of entries. Use min and max to bound how many images the user can capture.

const result = await ctx.ui.page({
  title: "Delivery proof",
  content: [
    ctx.ui.inputs.imageCapture("photos", {
      label: "Delivery photos",
      mode: "multi",
      min: 1,
      max: 3,
      caption: "optional",
    }),
  ],
});
 
for (const image of result.photos) {
  console.log(image.file.key, image.caption);
}

Capturing without captions

Set caption: "disabled" when the image is all you need. The caption on each entry is then left unset.

ctx.ui.inputs.imageCapture("photo", {
  label: "Odometer reading",
  caption: "disabled",
});

Response data

Each captured image is an object with the uploaded file and an optional caption. Single mode returns one entry; multi mode returns an array.

When caption is "disabled", the caption field is left unset.