image widget upload label as a button trick

image-widget.html.twig

{#
.theme:
function birch_preprocess_image_widget(&$variables, $hook) {
  // the image widget needs to know what the label is
  // look in admin/image-widget.hmtl.twig
  $variables['form_label_id'] = $variables['element']['#id'];
}
#}

{#
css:
/* -- input file (File upload)------------------------------------------------*/
input[type="file"] {
  position: absolute;
  z-index: -1;
  overflow: hidden;
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
}
/* create the magic of the label button*/
.image-widget__upload[for]{
  background-color: var(--pink900);
  color: var(--white);
  display: block;
  padding: 0.5rem 3rem;
  margin: 0 3rem;
  outline: 1px dashed red;
  margin: 0 auto;
  width: 20rem;

}
.image-widget__upload[for]:hover{
  background-color: var(--pink750);
  color: var(--pink100);
}
.image-widget__upload[for]:focus {
  background-color: var(--pink750);
  color: var(--pink100);
}

#}


<div{{ attributes.removeClass('clearfix').addClass('L') }}>

  {#
    check if theres no width - then we assume theres no image upload
    then lets add in the upload label that looks like a upload button
  #}
  {% if not data.width %}
    <label for="{{ form_label_id}}" class="image-widget__upload">{{ 'upload'|t }}</label>
  {% endif %}

  <div class="image-widget__preview w-2 w-12@s">
    <figure>
      {{ data.preview }}
      <figcaption>
        {# width + height of image #}
        {% if data.width['#value'] %}
          w:{{ data.width['#value'] }}
        {% endif %}

        {% if data.height['#value'] %}
          | h:{{ data.height['#value']}}
        {% endif %}
        <br>
        {{ data|without('preview', 'title','alt','remove_button') }}
      </figcaption>
    </figure>

  </div>
  <div class="image-widget__data w-10 w-12@s">
    {{ data.title}}
    {{ data.alt }}
  </div>

  {{ data.remove_button }}

</div>