Image field – Tsunami

Point at the image to show the change and clear buttons

Store icon

Shown in browser tabs and bookmarks.

<div class="field">
  <label for="if-icon">Store icon</label>
  <div class="image-field">
    <img src="img/logo-acme.svg" alt="Current store icon">
    <i class="icon icon-image" aria-hidden="true"></i>
    <button type="button" class="btn" data-size="icon-xs" id="if-icon" data-change aria-label="Change store icon" data-tooltip="Change"><i class="icon icon-pencil" aria-hidden="true"></i></button>
    <button type="button" class="btn" data-size="icon-xs" data-clear aria-label="Clear store icon" data-tooltip="Clear"><i class="icon icon-x" aria-hidden="true"></i></button>
    <input type="file" name="icon" accept="image/*">
  </div>
  <small>Shown in browser tabs and bookmarks.</small>
</div>

data-fit="contain": the whole image in a wide box, for a logo

Store logo

<div class="field">
  <label for="if-logo">Store logo</label>
  <div class="image-field" data-fit="contain" style="width: 18rem">
    <img src="img/logo-acme.svg" alt="Current store logo">
    <i class="icon icon-image" aria-hidden="true"></i>
    <button type="button" class="btn" data-size="icon-xs" id="if-logo" data-change aria-label="Change store logo" data-tooltip="Change"><i class="icon icon-pencil" aria-hidden="true"></i></button>
    <button type="button" class="btn" data-size="icon-xs" data-clear aria-label="Clear store logo" data-tooltip="Clear"><i class="icon icon-x" aria-hidden="true"></i></button>
    <input type="file" name="logo" accept="image/*">
  </div>
</div>

data-empty: no image yet, so only the icon and change button

Category image

<div class="field">
  <label for="if-empty">Category image</label>
  <div class="image-field" data-empty>
    <img alt="Current category image">
    <i class="icon icon-image" aria-hidden="true"></i>
    <button type="button" class="btn" data-size="icon-xs" id="if-empty" data-change aria-label="Choose a category image" data-tooltip="Choose"><i class="icon icon-pencil" aria-hidden="true"></i></button>
    <button type="button" class="btn" data-size="icon-xs" data-clear aria-label="Clear category image" data-tooltip="Clear"><i class="icon icon-x" aria-hidden="true"></i></button>
    <input type="file" name="image" accept="image/*">
  </div>
</div>

A checkbox is ticked while the image is cleared, and the form hears change

<form class="stack" data-gap="sm" id="if-form">
  <div class="field">
    <label for="if-form-icon">Store icon</label>
    <div class="image-field">
      <img src="img/logo-acme.svg" alt="Current store icon" />
      <i class="icon icon-image" aria-hidden="true"></i>
      <button
        type="button"
        class="btn"
        data-size="icon-xs"
        id="if-form-icon"
        data-change
        aria-label="Change store icon"
        data-tooltip="Change"
      >
        <i class="icon icon-pencil" aria-hidden="true"></i>
      </button>
      <button
        type="button"
        class="btn"
        data-size="icon-xs"
        data-clear
        aria-label="Clear store icon"
        data-tooltip="Clear"
      >
        <i class="icon icon-x" aria-hidden="true"></i>
      </button>
      <input type="file" name="icon" accept="image/*" />
      <input type="checkbox" name="icon-clear" />
    </div>
  </div>
  <output id="if-result">icon-clear: not sent</output>
</form>
<script>
  document.getElementById("if-form").addEventListener("change", (event) => {
    const sent = new FormData(event.currentTarget).get("icon-clear");
    document.getElementById("if-result").textContent = "icon-clear: " + (sent ?? "not sent");
  });
</script>

API

The field never uploads. Its form sends the file. Read the file from the input.

Event	On	Description
`input`, `change`	`input[type=file]`, bubbles	Fired when a file is chosen (by the browser) and when the image is cleared. After a clear, `event.target.files` is empty.

Key	Description
`Tab`	Moves to the change button, then the clear button. Both show while either has focus.
`Enter`, `Space`	Change opens the file picker. Clear empties the field and moves focus to change.

Attributes

Attribute / element	Values	Description
`.image-field`		A 96px square box around the img, icon, buttons and inputs.
`data-fit`	`contain`	Shows the whole image in a 2:1 box. By default (unset) the image fills the box and is cropped.
`data-empty`	present	Set by the script while there is no image. Add it yourself so it is right before the script runs.
`> img[src]`	URL	The starting image. Without `src` the field is empty.
`> .icon`		Shown while empty, e.g. `icon-image`.
`> [data-change]`	button	Opens the file picker. Required.
`> [data-clear]`	button	Clears the image. Leave it out if the image cannot be removed.
`> input[type=file]`	`name`, `accept`	Sends the chosen file with the form.
`> input[type=checkbox]`	`name`	Optional. Ticked while cleared, to tell the server to delete the file.
`aria-label`, `data-tooltip`	text	On both icon buttons.