> 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/file-upload.md).

# File Upload

Let users upload one or more files from a Dynamic Component, saved as Salesforce Files and linked to a record, with format limits and file naming options.

## Overview

The Avonni File Upload component lets users upload one or more files directly from within your Dynamic Component. Uploaded files are saved as Salesforce Files and can be automatically linked to a specified record.

You can restrict acceptable formats, control whether multiple files are allowed, and customize file naming with prefixes or suffixes.

**Common use cases**

* Attaching proposals or contracts to Opportunity records.
* Uploading supporting documentation for Case records.
* Adding images or specification sheets to Product records.
* Submitting assignments or completed forms with attachments in a custom workflow.
* Allowing users to upload profile pictures or identification documents.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2Fgit-blob-f0188b40c113912dfa1d9f31e6a19dec89baddcc%2F2025-06-02_11-28-14.png?alt=media" alt=""><figcaption></figcaption></figure>

## Projects

See how File Upload fits into a complete Salesforce workflow. Each project includes steps to build it with AI or manually.

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-cover data-type="image">Cover image</th></tr></thead><tbody><tr><td><h4><a href="https://docs.avonnicomponents.com/projects/use-cases/portals-and-partner-sites/portal-case-deflection">Portal Case Deflection</a></h4></td><td>Ask what the question is about, then answer it, so the case is never opened.</td><td data-object-fit="fill"><a href="https://3857391697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdHOej9Pd5IxJNGEJMZKW%2Fuploads%2FlV6k5IAUxIOsys3ReN7c%2Fportal-case-deflection-cover.png?alt=media">https://3857391697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdHOej9Pd5IxJNGEJMZKW%2Fuploads%2FlV6k5IAUxIOsys3ReN7c%2Fportal-case-deflection-cover.png?alt=media</a></td></tr></tbody></table>

## Configuration

To configure the File Upload, select it on the canvas. The **Edit File Upload** panel opens on the right. The sections below mirror the Properties tab.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2F8r818aFSSZ71k3kZSbCo%2Fdynamic-file-upload-properties-guest.png?alt=media" alt="The Edit File Upload Properties tab, down to the two Guest settings" width="320"><figcaption><p>The Properties tab, from Label through to Guest File Field Value.</p></figcaption></figure>

### Properties

#### Label

The text label displayed for the file uploader.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2F73yyfUpZWHa51ZOZKz8v%2Ffile-upload-anatomy.png?alt=media" alt="The file uploader showing its label, help icon and the drop zone with an Upload Files button"><figcaption><p>The label with its help icon, and the drop zone with the <strong>Upload Files</strong> button.</p></figcaption></figure>

#### Field level help

Help text detailing the purpose and function of the file uploader. It appears next to the label, typically as a tooltip icon, and can provide additional instructions such as accepted formats or size limits.

#### Variant

Changes the appearance and positioning of the **Label** relative to the uploader control.

| Option                 | Description                               |
| ---------------------- | ----------------------------------------- |
| **Standard** (default) | Label appears above the uploader.         |
| **Label Hidden**       | Label is hidden.                          |
| **Label Inline**       | Label appears to the left.                |
| **Label Stacked**      | Label appears above with stacked styling. |

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FureYMfY9hxuQ704iSAap%2Ffile-upload-variant.png?alt=media" alt="The four label variants over the same uploader"><figcaption><p>The four variants, each over the same uploader.</p></figcaption></figure>

#### Accepted Formats

A list of file extensions that users are allowed to upload (e.g., `.pdf`, `.jpg`, `.png`). Include the leading dot for each entry. Leave empty to allow all file types.

#### Allow Multiple Files

Specifies whether a user can upload more than one file simultaneously. When disabled, only a single file can be uploaded per interaction.

#### Show File Uploaded

If enabled, the uploader displays a list of files that have been successfully uploaded.

#### Uploaded Files Display Variant

Changes the appearance of the uploaded files display. Defaults to **List**. Requires: **Show File Uploaded** = enabled.

* **List** — the uploaded files are listed one per row.
* **Pill Container** — the uploaded files are shown as pills in a single wrapping container.

#### Stretch

If enabled, the file uploader takes the entire available width of its container.

#### Required

If enabled, the user must upload at least one file before the form can be submitted.

#### Disabled

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

#### Related Record Id

The record ID of the record that the uploaded file will be associated with. Bind this to a dynamic value — for example, `$Component.recordId` to link uploaded files to the current record page, or a Variable that holds the target record ID.

For guest users on an Experience Site, use **Guest File Field Name** and **Guest File Field Value** instead. See [Let Guest Users Upload Files](#let-guest-users-upload-files).

#### File Name Prefix

Text added to the beginning of the original filename when the file is saved in Salesforce. For example, a prefix of `Contract_` applied to `Details.pdf` produces `Contract_Details.pdf`.

#### File Name Suffix

Text added to the end of the original filename (before the extension) when the file is saved. For example, a suffix of `_Final` applied to `Report.docx` produces `Report_Final.docx`.

**File Name Prefix** and **File Name Suffix** aren't applied to files uploaded by guest users.

#### Guest File Field Name

The API name of a custom text field on the Content Version object that receives the **Guest File Field Value** when a guest user uploads a file. The field name must end with `fileupload__c` (for example, `Guest_Record_fileupload__c`). In an org with a namespace, include the prefix.

#### Guest File Field Value

The value saved in the **Guest File Field Name** field of each file a guest user uploads. Your flow reads it to find the record to link the file to. Bind it to a resource or variable, such as a constant holding the target record ID or a value from your form.

{% hint style="danger" %}
**Guest File Field Value** comes from the visitor's browser, and the visitor can change it before uploading. Always check the value in your flow before linking the file. See [Let Guest Users Upload Files](#let-guest-users-upload-files).
{% endhint %}

{% hint style="warning" %}
**Key Considerations**

* **Salesforce File Storage Limits:** Be mindful of your org's overall file storage limits.
* **User Permissions:** Users need appropriate permissions to create `ContentDocument` (Files) and `ContentDocumentLink` records to associate files with records.
* **File Size Limits:** Salesforce imposes limits on the size of individual files.
* **Security:** Ensure that the ability to upload and link files is appropriate for the users and the context of the page.
* **Naming Conventions:** Use prefixes/suffixes thoughtfully if you need standardized file naming.
  {% endhint %}

### Set Component Visibility

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

## Use Cases

### Let Guest Users Upload Files

On a public Experience Site, unauthenticated visitors can upload files that are linked to a record of your choice. Salesforce reassigns each file uploaded by a guest user to the site's default owner, so the File Upload can't link the file itself. Instead, it saves the **Guest File Field Value** on the uploaded file, and a record-triggered flow creates the link.

Before you start, make sure the site and its guest user can run Dynamic Components. See [Experience Sites Integration](/dynamic-components/core-concepts/experience-sites-integration.md).

{% stepper %}
{% step %}
**Create the Content Version field**

In **Setup**, open **Object Manager** → **Content Version** → **Fields & Relationships**, and create a **Text** field. Its API name must end with `fileupload__c` (for example, `Guest_Record_fileupload__c`).
{% endstep %}

{% step %}
**Allow guest uploads**

* In **Setup** → **Salesforce Files** → **General Settings**, select **Allow site guest users to upload files**.
* In your site's **Workspaces** → **Administration** → **Preferences**, select **Allow guest users to access public APIs**.
  {% endstep %}

{% step %}
**Create the flow that links the file**

Create a **Record-Triggered Flow** on **Content Version** that runs when a record is created, with an entry condition of your field **Is Null** = `False`. Optimize it for **Actions and Related Records**, then add:

1. **Get Records** on the object you link files to (for example, Case), where **Id** equals your Content Version field. Store only the first record.
2. **Decision**: continue only if the Get Records step found a record.
3. **Create Records** on **Content Document Link**:
   * **ContentDocumentId**: `{!$Record.ContentDocumentId}`
   * **LinkedEntityId**: the **Id** of the record found in step 1
   * **ShareType**: `V`
   * **Visibility**: `AllUsers`

Save and activate the flow.
{% endstep %}

{% step %}
**Configure the File Upload**

Set **Guest File Field Name** to your field's API name and bind **Guest File Field Value** to the target record ID.
{% endstep %}
{% endstepper %}

{% hint style="danger" %}
**Check the target record in your flow.** **Guest File Field Value** comes from the visitor's browser, and the visitor can change it before uploading. If your flow links the file to whatever ID it receives, a visitor can attach their upload to any record in your org. The Get Records and Decision steps above make sure the record exists and is of the expected object. Where possible, pass a key generated for the form instead of a raw record ID, and have the flow look the record up by that key. A value that isn't a valid ID makes the flow fail, so the upload is rejected.
{% endhint %}

Guest users can't rename or delete the files they upload, so the **Delete** and **Rename** actions are hidden for them, and **File Name Prefix** and **File Name Suffix** aren't applied.

## Interactions

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

### Change

Fires when a user uploads a file. The **contentDocumentIds** output variable is populated with the IDs of all successfully uploaded files, which you can use to drive downstream logic such as linking files to a record, refreshing a related list, or navigating to another page.

## Output Variables

The File Upload exposes this output variable you can reference elsewhere on the page after the user uploads a file.

### File Upload

When a user successfully uploads one or more files, this variable is populated with the resulting Salesforce record IDs.

| Output variable          | Type            | What it returns                                                        |
| ------------------------ | --------------- | ---------------------------------------------------------------------- |
| **Content Document Ids** | Text Collection | The IDs of the ContentDocument records created for each uploaded file. |

> **Example:** After a user attaches a signed contract, use **Content Document Ids** to pass the file ID to a custom action that links it to the related Opportunity record.

## Styling

Configure the File Upload's appearance from the **Style** tab of the Edit File Upload panel.

{% tabs %}
{% tab title="Margin" %}
Controls the *outer* spacing around the component.

* **Top / Right / Bottom / Left:** Adjust the space on each side.
  {% endtab %}

{% tab title="Padding" %}
Controls the *inner* spacing between the component's content and its border.

* **Top / Right / Bottom / Left:** Adjust the inner spacing on each side.
  {% endtab %}

{% tab title="Size" %}
Controls the component's dimensions.

* **Width / Height:** Set fixed dimensions.
* **Min Width / Max Width / Min Height / Max Height:** Constrain the size within bounds.
* **Overflow:** Control how content that exceeds the bounds is handled.
  {% endtab %}

{% tab title="Border" %}
Customizes the border surrounding the component.

* **Color / Size / Style / Radius:** Set the border color, thickness, style, and corner rounding.
  {% endtab %}

{% tab title="Label" %}
Styles the component's main label.

* **Color / Font Size / Font Style / Font Weight:** Set the label color and typography.
  {% endtab %}

{% tab title="File" %}
Styles the uploaded-file name text and the list divider.

* **File Name:** Color / Font Size / Font Style / Font Weight.
* **File List Border Bottom:** Color / Size / Style.
  {% endtab %}
  {% endtabs %}


---

# 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.avonnicomponents.com/dynamic-components/components/file-upload.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.