Default :: Upload Preview :: Css Zero Showcase

<div class="flex items-center gap" data-controller="upload-preview" data-upload-preview-default-image-value="https://csszero.lazaronixon.com/assets/default-avatar-8a6eaff1.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" />
      <img aria-hidden="true" src="/assets/camera-84102100.svg" width="20" height="20" />
      <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" />
    <img aria-hidden="true" src="/assets/minus-b71b2ac1.svg" width="20" height="20" />
    <span class="sr-only">Remove avatar</span>
  </label>
</div>

<%= tag.div class: "flex items-center gap", data: { controller: "upload-preview", upload_preview_default_image_value: asset_url("default-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" } %>
      <%= image_tag "camera.svg", size: 20, aria: { hidden: true } %>
      <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" } %>
    <%= image_tag "minus.svg", size: 20, aria: { hidden: true } %>
    <span class="sr-only">Remove avatar</span>
  </label>
<% end %>

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
  }
}

No matching results.

No matching results.

Example

Embed Code

Embed URL

Previews

No matching results.

Pages

No matching results.

Example