File Picker

Element which is responsible for rendering a file picker element.

Attributes

Attribute name	Type	Default	Description
control-id	string	''
control-name	string	''
disabled	boolean	false
required	boolean	false
error	boolean	false	If set to true, adds css error class
label-text	string	''	Text which is displayed inside upload button
label-icon-name	string	''	Name of the icon which is displayed next to the label text
remove-button-text	string	''	Text which is displayed inside file remove button
remove-button-icon-name	string	''	Name of the icon which is displayed inside file remove button
accept	string	''	list of accepted file formats, passed as a string, according to input type="file" documentation

DOM Events

This webcomponent listens to the following DOM events:

• removed
• clickedByEnterKey

Example

sourceoutput

<h-file-picker
    control-id="file-picker"
    control-name="file_picker"
    label-text="Wgraj plik"
    label-icon-name="add-file"
    remove-button-text="Usuń plik"
    remove-button-icon-name="remove-file"
    accept=".jpg,.png"
></h-file-picker>

<div class="control">
    <div class="control__content">
        <div class="control__element">
            <h-file-picker control-id="file-picker" control-name="file_picker" label-text="Wgraj plik" label-icon-name="add-file" remove-button-text="Usuń plik" remove-button-icon-name="remove-file" formats=".jpg, .png" class="file-picker">
                <input type="file" hidden class="file-picker__input" id="file-picker" name="file_picker" accept=".jpg,.png">

                <label class="file-picker__label" for="file-picker">
                    <h-file-picker-icon name="add-file" class="file-picker-icon icon">
                        <h-icon icon-name="add-file" class="icon">
                            <svg class="icon">
                                <use xlink:href="/assets/img/icons/symbol-defs.svg#add-file"></use>
                            </svg>
                        </h-icon> 
                    </h-file-picker-icon>
                    Wgraj plik
                </label>
            </h-file-picker>
        </div>
    </div>
</div>

Getting selected file

To get selected file, you can use the files property, which is a FileList object containing a list of File objects.

Setting file

To set file, you can use the files property, which accepts FileList object containing a list of File objects.