All View Components → picture

Select a view component to see details on how it works:

picture

An input component that allows the user to take a photo, or select an existing photo from their gallery.

Code in View XML:

<picture bind="item.photo" label="Take a Photo" required="false" />

Appearance on a mobile device:

Code in View XML:

<picture bind="item.photo" label="Take a Photo" required="false" source="gallery" />

Appearance on a mobile device:

Option	Required?	Details
`bind`	required	Variable/attribute in which to store the photo. Must be a variable or attribute of type `attachment` with `media="image/jpeg"` (see Attribute & Variable Types for more details)
`source`	optional	Controls whether the user (1) can only take a new photo using the device's camera, (2) can select an existing photo from their gallery, or (3) can choose either. `camera` to only allow the user to take a new photo using the camera, or `gallery` to only allow the user to choose a photo from the gallery, or `any` to allow the user to choose either of the above options. Defaults to `camera`
`label`	optional	Text to display on the photo input to instruct the user. It can be a Format String to make the text dynamic.
`required`	optional	`true` if the user must take a photo before proceeding to another view. Defaults to `false`.
`on-capture`	optional	Function to call after a photo is captured.
`show-if`	optional	Controls whether the component is hidden or shown. The argument specified to `show-if` can either be a literal boolean value (`true` or `false`), or it can specify a variable, parameter or attribute that can be a string, number, object, etc. that evaluates to false or evaluates to true (see the section Show/Hide Components Dynamically for full details). If the component also specifies `required="true"`, but it is hidden, the validation will be ignored/skipped.
`hide-if`	optional	The opposite of `show-if` (see above).