https://autowhisper.xyz/assets/controllers/file_picker_controller-2e8a4058.js

1import { Controller } from "@hotwired/stimulus"
2
3// Styled file picker for server-side multipart form uploads.
4// Shows the selected file name and (optionally) an inline image preview
5// before the user submits the form.
6export default class extends Controller {
7  static targets = ["input", "label", "preview", "previewImage", "saved"]
8  static values = {
9    defaultLabel: String
10  }
11
12  select(event) {
13    const file = event.target.files[0]
14    if (!file) {
15      if (this.hasLabelTarget) this.labelTarget.textContent = this.defaultLabelValue
16      if (this.hasSavedTarget) this.savedTarget.classList.remove("hidden")
17      if (this.hasPreviewTarget) this.previewTarget.classList.add("hidden")
18      return
19    }
20
21    if (this.hasLabelTarget) {
22      this.labelTarget.textContent = file.name
23    }
24
25    if (this.hasSavedTarget) {
26      this.savedTarget.classList.add("hidden")
27    }
28
29    if (this.hasPreviewTarget && this.hasPreviewImageTarget && file.type.startsWith("image/")) {
30      const reader = new FileReader()
31      reader.onload = (e) => {
32        this.previewImageTarget.src = e.target.result
33        this.previewTarget.classList.remove("hidden")
34      }
35      reader.readAsDataURL(file)
36    }
37  }
38}