---
title: "display-file"
description: "Overview"
permalink: /docs/build/ui-components/all-ui-components/display-file/
---
# display-file

## Overview

<Info title={"Platform compatibility"}>

Compatible with all platforms.

</Info>

<Info>

The `display-file` component was visually updated in version **4.80.0** of JourneyApps Runtime.

</Info>

The `display-file` component displays a file that was previously captured.

### Basic Example

**main.view\.xml**

```xml
<var name="usage_report" type="attachment" />

<display-file label="Usage Report" bind="usage_report" />
```

![](./media/spaces-2f9tchlr67elhbojpvhhud-2fuploads-2fgit-blob-d4aa3ccfbb81b7c7378f2926b3f7880128588e8f-2fdisplay-file-example-c464f96c.png)

## Advanced Attributes

### `downloadable`

See [`capture-file` > `downloadable`](/docs/build/ui-components/capture-file/#downloadable)

### `fullwidth`

See [`capture-file` > `fullwidth`](/docs/build/ui-components/capture-file/#fullwidth)

### `hide-filename`

See [`capture-file` > `hide-filename`](/docs/build/ui-components/capture-file/#hide-filename)

### `align-content`

<AttributeReference label="align-content" href="/docs/build/ui-components/common-attributes/align-content/" badge="advanced" tone="muted" />

### `align-controls`

<AttributeReference label="align-controls" href="/docs/build/ui-components/common-attributes/align-controls/" badge="advanced" tone="muted" />

### `align-label`

<AttributeReference label="align-label" href="/docs/build/ui-components/common-attributes/align-label/" badge="advanced" tone="muted" />

### `control-order`

<AttributeReference label="control-order" href="/docs/build/ui-components/common-attributes/control-order/" badge="advanced" tone="muted" />

### `id`

<AttributeReference label="id" href="/docs/build/ui-components/common-attributes/id/" badge="advanced" tone="muted" />

### `label-case`

<AttributeReference label="label-case" href="/docs/build/ui-components/common-attributes/label-case/" badge="advanced" tone="muted" />

### `label-color`

<AttributeReference label="label-color" href="/docs/build/ui-components/common-attributes/label-color/" badge="advanced" tone="muted" />

### `show-if`

<AttributeReference label="show-if" href="/docs/build/ui-components/common-attributes/show-if/" badge="advanced" tone="muted" />

### `hide-if`

<AttributeReference label="hide-if" href="/docs/build/ui-components/common-attributes/hide-if/" badge="advanced" tone="muted" />

## Common Attributes

### `bind`

<AttributeReference label="bind" href="/docs/build/ui-components/common-attributes/bind/" />

### `label`

<AttributeReference label="label" href="/docs/build/ui-components/common-attributes/label/" />

## Component Methods

The following component methods are available when an [`id`](/docs/build/ui-components/common-attributes/id/) is assigned to the component and `component.displayFile({id:'my-id'})` is called from JS/TS:

### `closeMedia`

See [`capture-file` > `closeMedia`](/docs/build/ui-components/capture-file/#closemedia)

### `downloadMedia`

See [`capture-file` > `downloadMedia`](/docs/build/ui-components/capture-file/#downloadmedia)

### `openMedia`

See [`capture-file` > `openMedia`](/docs/build/ui-components/capture-file/#openmedia)

### `scrollIntoView`

See [`capture-file` > `scrollIntoView`](/docs/build/ui-components/capture-file/#scrollintoview)