Input: Avatar

{# {% if label %}
  <label class="{% if small %}u-label-03{% else %}u-label-03{% endif %} c-form-label u-color-base" for="">{{label}}</label>
{% endif %} #}

<div class="c-form-avatar u-relative {{margin}}">
  <svg class="u-absolute u-overflow-hidden" style="width: 0; height: 0;">
    <defs>
      <clipPath id="mask" clipPathUnits="objectBoundingBox">
        <path d="M0.5,1 C0.856900994,1 1,0.856900994 1,0.5 C1,0.143099006 0.856900994,0 0.5,0 C0.143099006,0 0,0.143099006 0,0.5 C0,0.856900994 0.143099006,1 0.5,1 Z" />
      </clipPath>
    </defs>
  </svg>
  <input class="u-none" type="file" name="image" accept="image/*" />
  <div class="c-form-avatar__mask u-size-full"></div>
  <div class="c-form-avatar__uploader u-absolute u-cursor-pointer u-p-xsmall u-radius-circle u-border-none" aria-labelledby="image" aria-describedby="image">
    <svg class="o-icon o-icon--md o-link-text">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-upload-cloud"></use>
    </svg>
  </div>
</div>

{% if helper %}
  <span class="c-form-helper u-label-08 u-pt-xxsmall u-inline-block">{{helper}}</span>
{% endif %}

<script>
  const UPLOAD_BUTTON = document.querySelector(".c-form-avatar__uploader");
  const FILE_INPUT = document.querySelector("input[type=file]");
  const AVATAR = document.querySelector(".c-form-avatar__mask");

  UPLOAD_BUTTON.addEventListener("click", () => FILE_INPUT.click());

  FILE_INPUT.addEventListener("change", event => {
    const file = event.target.files[0];

    const reader = new FileReader();
    reader.readAsDataURL(file);

    reader.onloadend = () => {
      AVATAR.setAttribute("aria-label", file.name);
      AVATAR.style.background = `url(${reader.result}) center center/cover`;
    };
  });
</script>