Skip to main content

Attachment Field Component

The attachmentField component uploads one or more files and can optionally capture a photo. It supports extension and size limits, attachment previews, clearing, and upload callbacks.

When multiple attachments are present on the web, opening a preview launches a lightbox over the full field value. Previous/next controls and the thumbnail strip move between files without closing the dialog; the dialog's download action applies to the currently selected file.

Compact web variant​

Set props.options.variant to compact for a single-row upload bar. The bar shows the size and accepted-file hints inline, retains the optional Take Photo action, and expands into a full drop target while a file is dragged anywhere over the page. Existing attachments render below the bar.

component: attachmentField
name: documents
props:
  options:
    variant: compact
    allowMultiple: true
    allowCamera: true
    maxSize: 10485760
    allowedExtensions:
      - image/*
      - application/pdf

variant accepts default (the existing full upload area) or compact. The compact variant is currently a web presentation option; mobile file and camera behavior is unchanged.

Mobile camera zoom​

For native attachment capture, set props.options.enableZoom: true to show operator zoom controls. cameraZoom supplies the initial zoom factor; the renderer clamps it to the device's supported lenses and zoom range. When an ultra-wide rear lens is available, operators can zoom below 1x. The last operator-selected zoom is remembered per attachment field and overrides the configured value on later captures.

component: field
name: damagePhotos
props:
  type: attachment
  options:
    allowCamera: true
    enableZoom: true
    cameraZoom: 0.5

If enableZoom is false or omitted, cameraZoom still selects the fixed initial zoom but interactive controls and remembered zoom are disabled. Front-camera capture continues through the standard native camera path.