# capture-photo

## Overview

{% hint style="info" %}
**Version compatibility**

The `capture-photo` component was visually updated in version **4.74.0** of JourneyApps Runtime.
{% endhint %}

Take a photo, or select an existing photo from the device's gallery.

### Basic Example

```xml
<var name="captured_photo" type="photo" />

<capture-photo bind="captured_photo" label="Add a photo" source="any" />
```

![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-fc6b120f122ff8bd354e08bbaabd448271ac042d%2Fcapture-photo-example.png?alt=media)

## Standard Attributes

### `bind`

{% content-ref url="../xml-fields/bind" %}
[bind](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/bind)
{% endcontent-ref %}

### `label`

{% content-ref url="../xml-fields/label" %}
[label](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/label)
{% endcontent-ref %}

### `required`

{% content-ref url="../xml-fields/required" %}
[required](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/required)
{% endcontent-ref %}

## Advanced Attributes

### `align-content`

{% content-ref url="../xml-fields/align-content" %}
[align-content](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/align-content)
{% endcontent-ref %}

### `align-controls`

{% content-ref url="../xml-fields/align-controls" %}
[align-controls](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/align-controls)
{% endcontent-ref %}

### `align-label`

{% content-ref url="../xml-fields/align-label" %}
[align-label](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/align-label)
{% endcontent-ref %}

### `control-order`

{% content-ref url="../xml-fields/control-order" %}
[control-order](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/control-order)
{% endcontent-ref %}

### `disabled`

{% content-ref url="../xml-fields/disabled" %}
[disabled](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/disabled)
{% endcontent-ref %}

### `downloadable`

**Optional**

**Type**: `boolean`

**Default**: `true`

Set `downloadable` to `false` to hide the download button and prevent the user from downloading a captured/displayed photo.

### `fullwidth`

**Optional**

**Type**: `boolean`

**Default**: `false`

Specify whether the photo preview should span the full width of the available screen space.

{% tabs %}
{% tab title="capture-photo" %}

```xml
<capture-photo bind="factory" label="Factory Inspection" fullwith="true"/>
```

![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-3a1d5a3a4865c943568cfe27e556cb9419f7afcc%2Fcapture-photo-fullwidth.png?alt=media)
{% endtab %}

{% tab title="display-photo" %}

```xml
<display-photo bind="assembly" label="Assembly" fullwidth="true"/>
```

![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-595e6e6514c387983ad0ca30f7357ff674de1b62%2Fdisplay-photo-fullwidth.png?alt=media)
{% endtab %}
{% endtabs %}

### `icon-position`

{% hint style="info" %}
**Version compatibility**

`icon-position` was introduced in version **4.86.1** of the JourneyApps Runtime.
{% endhint %}

{% content-ref url="../xml-fields/icon-position" %}
[icon-position](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/icon-position)
{% endcontent-ref %}

### `id`

{% content-ref url="../xml-fields/id" %}
[id](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/id)
{% endcontent-ref %}

### `label-case`

{% hint style="info" %}
**Version compatibility**

`label-case` was introduced in version **4.80.0** of the JourneyApps Runtime.
{% endhint %}

{% content-ref url="../xml-fields/label-case" %}
[label-case](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/label-case)
{% endcontent-ref %}

### `label-color`

{% content-ref url="../xml-fields/label-color" %}
[label-color](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/label-color)
{% endcontent-ref %}

### `on-change` and `on-capture`

{% content-ref url="../xml-fields/on-change" %}
[on-change](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/on-change)
{% endcontent-ref %}

{% hint style="info" %}
`on-capture` is functionally similar to `on-change`, however only the current `$value` is being passed as an event parameter.
{% endhint %}

### `resolution`

**Optional**

**Type:** `small` | `medium` | `large`

**Default**: `small`

Controls the resolution of captured photos. A value of `small` to limit photos to 1296 x 968 pixels (\~1 MP), or `medium` to limit photos to 2048 x 1536 pixels (\~3 MP), or `large` to limit photos to 3264 x 1536 pixels (\~8 MP).

### `show-if` and `hide-if`

{% content-ref url="../xml-fields/show-if" %}
[show-if](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/show-if)
{% endcontent-ref %}

{% content-ref url="../xml-fields/hide-if" %}
[hide-if](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/hide-if)
{% endcontent-ref %}

### `source`

**Optional**

**Type:** `camera` | `gallery` | `any`

**Default**: `camera`

Controls whether the user

* can only take a new photo using the device's camera,
* can select an existing photo from their gallery, or
* can choose either.

Source mode `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.

{% hint style="warning" %}
**Layout**

Changing the `source` will also change the layout of the `capture-photo` component. Source `any` will show both the camera and gallery buttons.
{% endhint %}

## Component Methods

The following component methods are available when an [`id`](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/id) is assigned to the component and `component.capturePhoto({id:'my-id'})` / `component.displayPhoto({id:'my-id'})` is called from JS/TS:

### `captureMedia`

Programmatically open open a camera allowing the user to capture a photo.

```javascript
try {
    component.capturePhoto({id: 'my-id'}).captureMedia();
} catch (e) {
    // handle exception here
}
```

### `closeMedia`

Programmatically close the photo preview.

{% tabs %}
{% tab title="capture-photo" %}

```javascript
try {
    component.capturePhoto({id: 'my-id'}).closeMedia();
} catch (e) {
    // handle exception here
}
```

{% endtab %}

{% tab title="display-photo" %}

```javascript
try {
    component.displayPhoto({id: 'my-id'}).closeMedia();
} catch (e) {
    // handle exception here
}
```

{% endtab %}
{% endtabs %}

### `deleteMedia`

Programmatically clear a captured photo.

```javascript
try {
    component.capturePhoto({id: 'my-id'}).deleteMedia();
} catch (e) {
    // handle exception here
}
```

{% hint style="warning" %}
`deleteMedia` will trigger an [`on-change`](#on-change-and-on-capture) if a function is assigned to it.
{% endhint %}

### `downloadMedia`

Programmatically trigger a download of the captured/displayed photo.

{% tabs %}
{% tab title="capture-photo" %}

```javascript
try{
    component.capturePhoto({id: 'my-id'}).downloadMedia();
} catch (e) {
    // handle exception here
}
```

{% endtab %}

{% tab title="display-photo" %}

```javascript
try {
    component.displayPhoto({id: 'my-id'}).downloadMedia();
} catch (e) {
    // handle exception here
}
```

{% endtab %}
{% endtabs %}

### `openMedia`

Programmatically open the photo preview.

{% tabs %}
{% tab title="capture-photo" %}

```javascript
try {
    component.capturePhoto({id: 'my-id'}).openMedia();
} catch (e) {
    // handle exception here
}
```

{% endtab %}

{% tab title="display-photo" %}

```javascript
try {
    component.displayPhoto({id: 'my-id'}).openMedia();
} catch (e) {
    // handle exception here
}
```

{% endtab %}
{% endtabs %}

### `scrollIntoView`

Programmatically scroll until the `capture-photo` / `display-photo` component is visible in the view.

{% tabs %}
{% tab title="capture-photo" %}

```javascript
try {
    component.capturePhoto({id: 'my-id'}).scrollIntoView();
} catch (e) {
    // handle exception here
}
```

{% endtab %}

{% tab title="display-photo" %}

```javascript
try {
    component.displayPhoto({id: 'my-id'}).scrollIntoView();
} catch (e) {
    // handle exception here
}
```

{% endtab %}
{% endtabs %}

### `selectLocalMedia`

Programmatically open a file picker allowing the user to select a photo from their device.

```javascript
try {
    component.capturePhoto({id: 'my-id'}).selectLocalMedia();
} catch (e) {
    // handle exception here
}
```