> For the complete documentation index, see [llms.txt](https://docs.work-relay.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.work-relay.com/forms/form-components/options/file.md).

# File

The File component allows a user to upload or download a single file within a section.

## Working with component

[Managing components](https://neostella.gitbook.io/work-relay-documentation/K6d8zoAI1M2x24Qd4SS2/forms/form-components/working-with-form-components#managing-components)

## Component properties

[Components basic properties](https://neostella.gitbook.io/work-relay-documentation/K6d8zoAI1M2x24Qd4SS2/forms/form-components/components-basic-properties)

This component has the following specific properties:

![](/files/3fef2bc8000ec24e5ea078e1004082f8b0580ba0)

* **Source Type** — Must be selected to specify the file source. See below.
* **Fields** — Allows configuration of labels for standard and custom fields of the File object. See below.
* **Allow Preview** — A preview of `.png` and `.img` files is displayed when a file is uploaded.
* **Allow Deletion** — Deletes the file when it is replaced with a new one.
* **Make Public** — Any user in the SalesForce organization can view and download the file.
* **Source** — Shown if Source Type is not "none". See below.
* **Allowed types** — List of file types the application will allow to upload.

## Allowed types

Click the **Settings** icon next to **Allowed Types to open** popup with the list of  common file types. \
Select the necessary file types and click **Apply**.

![](/files/767a59d5b586ffaddcbf7f920465c1e18d4d83d1)

## Source type settings

![](/files/17f7c59c09d1e6db8a813c74e41d2499e40299ed)

* If **none** of the Source Type options is selected, the component only allows uploading new files and looks like the following:

![](/files/937010946a0706fafb774e3c1fa5af38218378c1)

Selecting any Source Type option provides the ability to display a file already uploaded to the organization. This selection automatically shows the "Source" field (6), which allows configuration of the file source.

* **File ID** source type: The user provides the ID of the file in the SalesForce organization to display on the form. Merge fields or file ID can be used.

![](/files/af7f48106812671c8f7e2dda925affbd2186ebf3)

* **Conditions** source type: The user provides conditions to query the file to display on the form.

![](/files/bfd9039987654dd8a8bc7ade425773e0663c7524)

{% hint style="info" %}
When Source Type is set to "Conditions", the proper file is shown in this component only if it is related to the record for which the form is shown.
{% endhint %}

## Fields

{% hint style="info" %}
Use Fields settings when you need to add default values to the file fields. Fields can be editable or read only. Users can use merge fields or static values to provide default field values.
{% endhint %}

If you use fields for a file existing in the Salesforce organization, such as with File ID or Conditions source type, default field values are displayed only when the corresponding file properties are blank. Otherwise, they are overridden by file properties. If the component is used for uploading new files, such as when the source type is blank, default field values are always displayed.

See [Salesforce documentation](https://developer.salesforce.com/docs/atlas.en-us.object_reference.meta/object_reference/sforce_api_objects_contentversion.htm) about files.

![](/files/acf162cc06e6fef99cf4ef1206af5f9ed9535f45)

The above setup results in the following component view:

![](/files/f27ee63abbdfad270ac2c9cecc9796a44b34cafd)

If "Allow preview" is on, files that can be previewed on the page, usually images, are shown as thumbnails:

![](/files/83b5bc932da1e84c135a4c8a59cf3a9174e70542)

Starting release 8.7, you can click the file to see a full-size preview, download, share, and other functions:

![](/files/9cc4ce9ddf0bad0b9f4ef989d46d45c85cc2c448)

## Validation rules

This component has no validation rules.

## Events

[Form input events](https://neostella.gitbook.io/work-relay-documentation/K6d8zoAI1M2x24Qd4SS2/forms/form-building/events)

## Conditional styles

[Form components conditional styling](https://neostella.gitbook.io/work-relay-documentation/K6d8zoAI1M2x24Qd4SS2/forms/basics/conditional-styles)

This component has the following conditional styles available:

* hide
* show
* required
* disable
* clear