Skip to content

File Picker

The file_picker macro is used to render a file picker control based on <input type="file"> element. This macro allows to customize the label as well as the text on the button responsible for removing the files

Definition

{% file_picker(options) %}

File Picker parameters

options

object represents an object of file picker attributes

Option key Type Default Required Description
options.id string "" yes Id attribute of the file picker input
options.name string "" yes Name attribute of the file picker input
options.labelText string "" yes Text displayed on a button that allows to upload files
options.labelIconName string "" no Name of the icon displayed on a button that allows to upload files
options.error boolean false no If set to true, appropriate styling class will be added to the file picker
options.required boolean false no If set to true, required attribute and appropriate styling class will be added to the file picker
options.disabled boolean false no If set to true, disabled attribute and appropriate styling class will be added to the file picker
options.removeButtonText string "" no Text displayed on a button that allows to remove the added file
options.removeButtonIconName string "" no Name of the icon displayed on a button that allows to remove the added file
options.fileFormats string "" no List of accepted file formats according to input's accept attribute documentation

Example

In this example we render a basic file picker.

{% from "@macros/file_picker.twig" import file_picker %}

{{ file_picker({
    id: 'file-picker-1',
    name: 'document',
    labelText: 'Upload a file'
}) }}

Example

In this example we render a file picker that allows only image files with a custom label with an icon and custom text on the remove button.

{% from "@macros/file_picker.twig" import file_picker %}

{{ file_picker({
    id: 'file-picker-2',
    name: 'picture',
    labelText: 'Upload a picture',
    labelIconName: 'add-file'
    removeButtonText: 'Remove a picture',
    fileFormats: ".jpg, .png, .svg, .webp"
}) }}

Macro source code

{% macro file_picker(options) %}
    <h-file-picker
        {% if options.required %}required{% endif %}
        {% if options.disabled %}disabled{% endif %}
        {% if options.error %}error{% endif %}
        class="file-picker"

        control-id="{{ options.id }}"
        control-name="{{ options.name }}"

        {% if options.labelText is defined %}
            label-text="{{ options.labelText }}"
        {% endif %}

        {% if options.labelIconName is defined %}
            label-icon-name="{{ options.labelIconName }}"
        {%  endif %}

        {% if options.removeButtonText is defined %}
            remove-button-text="{{ options.labelText }}"
        {% endif %}

        {% if options.removeButtonIconName is defined %}
            remove-button-icon-name="{{ options.removeButtonIconName }}"
        {%  endif %}

        {% if options.fileFormats is defined %}
            accept="{{ options.fileFormats }}"
        {%  endif %}
    ></h-file-picker>
{% endmacro %}

Webcomponents reference

Form reference