https://www.georgetowncoc.com/assets/controllers/form_file_upload_controller-8d22889d.js

1import { Controller } from "@hotwired/stimulus"
2
3export default class extends Controller {
4  static targets = ["input", "filenames", "error"]
5  static values = { maxFiles: Number, maxFileSizeMb: Number }
6
7  change() {
8    const files = Array.from(this.inputTarget.files)
9    this.filenamesTarget.replaceChildren(...files.map((file) => {
10      const item = document.createElement("li")
11      item.textContent = file.name
12      item.className = "break-words"
13      return item
14    }))
15    this.filenamesTarget.hidden = files.length < 2
16
17    let message = ""
18    if (files.length > this.maxFilesValue) {
19      message = `Choose no more than ${this.maxFilesValue} ${this.maxFilesValue === 1 ? "file" : "files"}.`
20    } else if (files.some((file) => file.size > this.maxFileSizeMbValue * 1024 * 1024)) {
21      message = `Each file must be ${this.maxFileSizeMbValue} MB or smaller.`
22    }
23    this.inputTarget.setCustomValidity(message)
24    this.inputTarget.setAttribute("aria-invalid", message ? "true" : "false")
25    this.errorTarget.textContent = message
26    this.errorTarget.hidden = message === ""
27  }
28}