https://littlebirdelectronics.com.au/assets/controllers/ecommerce/image_upload_controller-9c5b3417.js

1import { Controller } from "@hotwired/stimulus"
2
3export default class extends Controller {
4  static targets = ["input", "preview"]
5
6  preview() {
7    const files = this.inputTarget.files
8    if (!this.hasPreviewTarget || files.length === 0) return
9
10    this.previewTarget.innerHTML = ""
11    Array.from(files).forEach(file => {
12      if (!file.type.startsWith("image/")) return
13      const reader = new FileReader()
14      reader.onload = (e) => {
15        const img = document.createElement("img")
16        img.src = e.target.result
17        img.className = "h-20 w-20 object-cover rounded-md"
18        this.previewTarget.appendChild(img)
19      }
20      reader.readAsDataURL(file)
21    })
22  }
23}