> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/dynamic-components/components/document-scanner.md).

# Document Scanner

The Avonni Document Scanner component enables users to scan or upload documents using a device's camera or photo library within Salesforce Dynamic Components. Use it for expense tracking, record updates, or document management workflows.

## Overview

Use Cases:

* Capture expense receipts for reimbursement forms.
* Scan IDs or contracts for customer onboarding.
* Digitize paper forms for case or record attachments.
* Record delivery documents in logistics workflows.
* Archive physical documents in Salesforce Files.

## Configuration

To configure the Document Scanner, select it on the canvas. The **Edit Document Scanner** panel opens on the right with two tabs: **Properties** and **Interactions**. The sections below mirror the Properties tab.

### Properties

#### Open Onload

If enabled, the scanner opens automatically when the component loads on screen, without requiring the user to click a button.

#### Image Source

Specifies how the document is acquired. Options:

* **Input Image** — scans from base64 image data supplied via the **Base64 Image Data** setting.
* **Photo Library** — opens the device's photo library so the user can pick an existing image.
* **Device Camera** — activates the device camera for a live capture.

#### Base64 Image Data

Provides the base64-encoded image bytes to scan. Requires: **Image Source** = `Input Image`.

#### Show Preview

If enabled, a preview of the scanned document is shown to the user before the result is committed.

### Button

These settings control the button that opens the scanner when **Open Onload** is off.

#### Label

The text displayed on the button. Defaults to **Scan**.

#### Variant

Changes the visual appearance of the button. Options: Bare, Bare Inverse, Base, Border, Border Filled, Border Inverse, Brand, Brand Outline, Container, Destructive, Destructive Text, Inverse, Neutral (default), Success.

#### Icon Name

The Lightning Design System icon displayed on the button (for example, `utility:camera`).

#### Icon Position

The side of the button label where the icon appears — **Left** (default) or **Right**. Requires: **Icon Name** to be set.

#### Type

The HTML button type. Options: Button (default), Reset, Submit.

#### Stretch

If enabled, the button expands to fill the full available width.

#### Disabled

If enabled, the button is disabled and users cannot interact with it.

### Set Component Visibility

All components support conditional visibility — see [Component Visibility](/dynamic-components/core-concepts/component-visibility.md).

## Interactions

[Interactions](/dynamic-components/component-builder/interactions.md) define what happens when users interact with the Document Scanner. Configure them from the **Interactions** tab of the Edit Document Scanner panel.

### Successful Scan

Fires when a scan completes successfully. Use this to save the scanned result to Salesforce Files, update a record, or trigger downstream flow logic. The scanned data is available through the **value** and **valueCollection** output attributes.

## Output Variables

The Document Scanner exposes these output variables you can reference elsewhere on the page after the user interacts with it.

### Scan Result

When a scan completes successfully, these variables are populated with the captured document data.

| Output variable      | Type            | What it returns                                                                        |
| -------------------- | --------------- | -------------------------------------------------------------------------------------- |
| **Value**            | Text (String)   | The scanned document as a base64-encoded string.                                       |
| **Value Collection** | Text Collection | The scanned documents as a collection of base64-encoded strings, one per scanned page. |

> **Example:** After a successful scan, use **Value** to store the base64 image in a record field, or pass **Value Collection** to a downstream component that processes multi-page documents.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/dynamic-components/components/document-scanner.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.