# Image Picker

{% embed url="<https://www.youtube.com/watch?v=cO9eYIadj64>" %}

Watch this on Youtube: <https://www.youtube.com/watch?v=cO9eYIadj64>

The Image Picker action allows users to pick images or videos from their device camera or gallery. It supports customization such as media type, resolution limits, image quality, and multiple file selection.

## Properties

| Property        | Type     | Required | Description                                                                                   |
| --------------- | -------- | -------- | --------------------------------------------------------------------------------------------- |
| `Select Media`  | Dropdown | No       | The source for selecting media: `"camera"` or `"gallery"`. Defaults to `"gallery"`.           |
| `Camera Source` | Dropdown | No       | Camera to use when `Select Media` is `"camera"`: `"front"` or `"rear"`. Defaults to `"rear"`. |
| `Media Type`    | Dropdown | No       | Type of media to select: `"photo"`, `"video"`, or `"all"`. Defaults to allowing both.         |
| `Max Width`     | `number` | No       | Maximum width for selected images in pixels.                                                  |
| `Max Height`    | `number` | No       | Maximum height for selected images in pixels.                                                 |
| `Image Quality` | `number` | No       | Image quality (0-100). Higher values mean better quality but larger file sizes.               |
| `Max Duration`  | `number` | No       | Maximum duration for selected videos in seconds.                                              |
| `File Variable` | Dropdown | No       | File Type Variable where the selected media file will be stored.                              |

## Use Cases

* **Profile Pictures**: Allow users to upload or capture profile images
* **Photo Sharing**: Enable users to select and share multiple photos
* **Document Scanning**: Capture images of documents with quality controls
* **Video Messages**: Record short video clips for messaging
* **Media Upload Forms**: Attach images/videos to forms or posts

## Default Behavior

By default:

| Behavior              | Description                                        |
| --------------------- | -------------------------------------------------- |
| **Media Source**      | Opens gallery if no `Select Media` specified       |
| **Camera Device**     | Uses rear camera when capturing from camera        |
| **Media Type**        | Allows both photos and videos                      |
| **Selection**         | Single file selection only                         |
| **File Storage**      | Selected media stored in specified `File Variable` |
| **User Cancellation** | Action completes without error if user cancels     |

## How to Use

<figure><img src="https://3626461507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbhApDTL7kHrXte2TTtjs%2Fuploads%2Fgit-blob-5cba9aae5212d6a4d80aea5956611d839ffbaf34%2Fimage_picker_action.png?alt=media" alt="Call External Method action configuration showing message name and payload fields"><figcaption><p>Call External Method action configuration in Digia Studio</p></figcaption></figure>

1. Attach the action to a widget event (button tap, icon press, etc.)
2. Select **Image Picker** from the action list
3. Configure `Select Media` (camera/gallery) and `Media Type` (photo/video/all)
4. Set optional constraints like for images `Max Width`, `Max Height`, `Image Quality` and for videos `Max Duration`
5. Specify `fileVariable` to store the selected media

## Implementation Details

The action uses the `image_picker` package to access device camera and gallery. Selected files are converted to `AdaptedFile` objects that include file data, metadata, and size information.

For web platforms, file bytes are read immediately. For mobile platforms, file size is determined from the file system.

When users cancel the picker (tap back or cancel), the action completes successfully without storing any files.

## Related Actions

* [File Picker](https://docs.digia.tech/logic-and-interaction/actions/file-picker) - Select documents or other file types
* [Upload](https://docs.digia.tech/logic-and-interaction/actions/upload) - Upload selected files to a server
* [Set State](https://docs.digia.tech/logic-and-interaction/actions/set-state) - Update UI state with selected media

***