---
url: /documentation/input-types/file.md
description: >-
  Configure file attachment inputs with multiple selection, MIME-type
  restrictions, and list or grid presentation.
---

# File Input

Enabled to choose one or multiple files (media attachmanets) and define its order.

```js
{
  input: {
    type: 'file', // [!code focus:5]
    multiple: false,
    fileTypes: ['video'],
    chooseButton: { label: 'Dateien auswählen' },
    dialog: { button: 'Dateien auswählen' }
  }
}
```

## Input Options

| Option | Values | Default | Description |
| - | - | - | - |
| `required` | `boolean` | `false` | Whether picking a file is mandatory. |
| `multiple` | `boolean` | `true` | Allow to select multiple if true. |
| `fileTypes` | `string[]` | `[]` | Restrict the initially selectable files. Passed types can be MIME types or from a set of predefined keywords (`image`, `audio`, `video`, `unattached`, `mine`, `uncategorized`). |
| `dialog.button` | `string` | `'Auswählen'` | Text on the blue WP Media Frame button. |
| `chooseButton.label` | `string` | `'Datei auswählen'` | Text on the select media button. |
| `listType` | `'list' \| 'grid'` | `'list'` | Layout to display input. |

## Value Format

The value of the `file` input consists of objects of the shape below. It always is returned as an array, even if only a single file can be picked.

```js
[
  {
    "id": 123,
    "preview": {
      "url": "http://localhost/wp-includes/images/media/document.svg",
      "filename": "Dokument.pdf"
    }
  }
]
```

## Template Usage

```php
add_filter('wpce_render_example', function ($wpce, $element) {
	$props = $element->properties;

	$links = [];
	foreach ($props->files as $file) {
		$url = wp_get_attachment_url($file->id);
		$title = get_the_title($file->id);
		$links[] = <<<HTML
			<li>
				<a href="{$url}" target="_blank">{$title}</a>
			</li>
			HTML;
	}

	$html = '<ul>' . join('', $links) . '</ul>';
	return $html;
}, 20, 2);
```

## Conditions

The `file` input type supports the following conditions for [dynamic visibility](/documentation/concepts/elements/definition#dynamic-visibility):

| Condition | Payload | Description |
| - | - | - |
| `isEmpty` | `boolean`defaults to `true` | Checks whether or not a file has been picked. |