File Input
Enabled to choose one or multiple files (media attachmanets) and define its order.
js
{
input: {
type: 'file',
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:
| Condition | Payload | Description |
|---|---|---|
isEmpty | booleandefaults to true | Checks whether or not a file has been picked. |