---
title: "capture-file"
description: "Overview"
permalink: /docs/build/ui-components/all-ui-components/capture-file/
---
# capture-file
## Overview
Compatible with all platforms. Web is only supported from version **4.80.0** of the JourneyApps Runtime.
The `capture-file` component was visually updated in version **4.80.0** of JourneyApps Runtime.
The `capture-file` component allows users to upload a file from their device.
### Basic Example
**main.view\.xml**
```xml
```
## Advanced Attributes
### `downloadable`
Set `downloadable` to `false` to hide the download button and prevent the user from downloading a captured/displayed file.
### `fullwidth`
Specify whether the file preview should span the full width of the available screen space.
### capture-file
```xml
```
### display-file
```xml
```
### `hide-filename`
Override the default and hide the captured/displayed filename from the preview.
### capture-file
```xml
```
### display-file
```xml
```
### `align-content`
### `align-controls`
### `align-label`
### `control-order`
### `disabled`
### `icon-position`
### `id`
### `label-case`
### `label-color`
### `on-change`
### `show-if`
### `hide-if`
## Common Attributes
### `bind`
### `label`
### `required`
## 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.captureFile({id:'my-id'})` / `component.displayFile({id:'my-id'})` is called from JS/TS:
### `captureMedia`
Programmatically open the file picker that enables the user to select and upload a file.
```javascript
try {
component.captureFile({id: 'my-id'}).captureMedia();
} catch (e) {
// handle exception here
}
```
### `closeMedia`
Programmatically close the file preview.
### capture-file
```javascript
try {
component.captureFile({id: 'my-id'}).closeMedia();
} catch (e) {
// handle exception here
}
```
### display-file
```javascript
try {
component.displayFile({id: 'my-id'}).closeMedia();
} catch (e) {
// handle exception here
}
```
### `deleteMedia`
Programmatically clear a captured file.
```javascript
try {
component.captureFile({id: 'my-id'}).deleteMedia();
} catch (e) {
// handle exception here
}
```
`deleteMedia` will trigger an [`on-change`](#on-change) if a function is assigned to it.
### `downloadMedia`
Programmatically trigger a download of the captured/displayed file.
### capture-file
```javascript
try{
component.captureFile({id: 'my-id'}).downloadMedia();
} catch (e) {
// handle exception here
}
```
### display-file
```javascript
try {
component.displayFile({id: 'my-id'}).downloadMedia();
} catch (e) {
// handle exception here
}
```
### `getMetadata`
Retrieve metadata about the captured file.
```javascript
try {
var data = component.captureFile({id: 'my-id'}).getMetadata();
console.log('metadata', data);
} catch (e) {
// handle exception here
}
```
### `openMedia`
Programmatically open the file preview.
### capture-file
```javascript
try {
component.captureFile({id: 'my-id'}).openMedia();
} catch (e) {
// handle exception here
}
```
### display-file
```javascript
try {
component.displayFile({id: 'my-id'}).openMedia();
} catch (e) {
// handle exception here
}
```
### `scrollIntoView`
Programmatically scroll until the `capture-file` / `display-file` component is visible in the view.
### capture-file
```javascript
try {
component.captureFile({id: 'my-id'}).scrollIntoView();
} catch (e) {
// handle exception here
}
```
### display-file
```javascript
try {
component.displayFile({id: 'my-id'}).scrollIntoView();
} catch (e) {
// handle exception here
}
```