Input Group: File

{%- if id -%}
    {% set random_number = range(0, 100000) | random -%}
    {% set id = id | replace(' ', '-') | lower + '--' + random_number -%}
{%- else -%}
    {% set random_number = range(0, 100000) | random -%}
    {% set id = label | replace(' ', '-') | lower + '--' + random_number -%}
{% endif -%}
<!-- FIELD Component -->

{%- if type == 'default' -%}
  <div class="kx-input-group">
    <div class="kx-input-group__prepend">
      <span class="kx-input-group-text">Label</span>
    </div>
    <input class="kx-field kx-input-group__field kx-field--size-base" id="--8412" type="text" />
  </div>

  <br />

  <div class="kx-input-group">
    <input class="kx-field kx-input-group__field kx-field--size-base" id="--8412" type="text" />
    <div class="kx-input-group__append">
      <span class="kx-input-group-text">Label</span>
    </div>
  </div>

{%- else -%}
  <div class="{% if not labelTxt %} kx-is-vishidden{% endif %}">
    <label class="kx-label" for="{{ id }}">
        {{ labelTxt }}{%- if optionalTxt %}<span class="kx-form__optional">({{ optionalTxt }})</span>{% endif %}
    </label>
  </div>

  <div class="kx-input-group">
    <div class="kx-input-group__prepend kx-file-selector">
      <input id="kx-single-file-upload" type="file" class="kx-hidden-file-input" />
      <button class="kx-btn kx-btn--skin-primary kx-btn--size-base">
        <span class="kx-btn__inner">
          <span class="kx-btn__txt">Browse...</span>
        </span>
      </button>
    </div>
    <input id="asfd68685756978" class="kx-field kx-input-group__field kx-field--size-base" type="text" readonly />

    <script type="application/javascript">
        const fileSelectElement = document.querySelector('.kx-hidden-file-input');
        fileSelectElement.addEventListener('change', kxInputGroup_SetFileName);

        function kxInputGroup_SetFileName(e) {
            let kxinput = document.getElementById('asfd68685756978');
            kxinput.value = e.target.files[0].name;
        }
    </script>
  </div>
{%- endif -%}