Css Zero Showcase

Previews

No matching results.

Pages

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="flex items-center gap" data-controller="upload-preview" data-upload-preview-default-image-value="https://csszero.lazaronixon.com/assets/avatar-1ee67b00.svg">
  <label class="flex items-center gap">
    <div class="btn btn--icon">
      <input type="file" name="avatar" id="avatar" class="sr-only" accept="image/*" data-upload-preview-target="input" data-action="upload-preview#previewImage" />
      <span class="icon icon--camera" style="--icon-size: 1.25rem" aria-hidden="true"></span>
      <span class="sr-only">Upload avatar</span>
    </div>
    <div class="btn avatar" style="--avatar-size: 100px;">
      <img alt="Avatar" data-upload-preview-target="image" src="/assets/cartoon-93de1535.jpg" width="48" height="48" />
    </div>
  </label>
  <label class="btn btn--icon btn--negative" data-action="click->upload-preview#clear">
    <input type="hidden" name="remove_avatar" id="remove_avatar" value="false" data-upload-preview-target="removeInput" autocomplete="off" />
    <span class="icon icon--minus" style="--icon-size: 1.25rem" aria-hidden="true"></span>
    <span class="sr-only">Remove avatar</span>
  </label>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<%= tag.div class: "flex items-center gap", data: { controller: "upload-preview", upload_preview_default_image_value: asset_url("avatar.svg") } do %>
  <label class="flex items-center gap">
    <div class="btn btn--icon">
      <%= file_field_tag :avatar, class: "sr-only", accept: "image/*", data: { upload_preview_target: "input", action: "upload-preview#previewImage" } %>
      <span class="icon icon--camera" style="--icon-size: 1.25rem" aria-hidden="true"></span>
      <span class="sr-only">Upload avatar</span>
    </div>
    <div class="btn avatar" style="--avatar-size: 100px;">
      <%= image_tag "cartoon.jpg", size: 48, alt: "Avatar", data: { upload_preview_target: "image" } %>
    </div>
  </label>
  <label class="btn btn--icon btn--negative" data-action="click->upload-preview#clear">
    <%= hidden_field_tag "remove_avatar", false, data: { upload_preview_target: "removeInput" } %>
    <span class="icon icon--minus" style="--icon-size: 1.25rem" aria-hidden="true"></span>
    <span class="sr-only">Remove avatar</span>
  </label>
<% end %>
CSS is not required or multiple files are needed, check the notes.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
  static targets = [ "image", "input", "removeInput" ]
  static values  = { defaultImage: String }
  previewImage() {
    const selectedFile = this.inputTarget.files[0]
    if (selectedFile) {
      this.imageTarget.src = URL.createObjectURL(selectedFile)
      this.imageTarget.onload = () => { URL.revokeObjectURL(this.imageTarget.src) }
      this.removeInputTarget.value = false
    }
  }
  clear() {
    this.imageTarget.src = this.defaultImageValue
    this.removeInputTarget.value = true
  }
}

Example

You can remove the attachment in the update request using the hidden input value.

user.avatar.purge if params[:remove_avatar] == 'true'