image_preview_controller.js

import { Controller } from "stimulus"

const c = window.socializus?.constants
const t = window.socializus?.translations

export default class extends Controller {
  static targets = ["output", "input", "error", "button", "name"]

  readURL() {
    const files = this.inputTarget.files

    this.errorTarget.innerText = ""

    if (files && files[0]) {
      const reader = new FileReader()

      reader.onload = () => {
        if (files[0].size > c.max_file_size) {
          this.errorTarget.innerText = t.image_is_too_large
          this.outputTarget.classList.add("hidden")
          this.nameTarget.innerText = ""
        } else {
          this.outputTarget.src = reader.result
          this.outputTarget.classList.remove("hidden")
          this.nameTarget.innerText = files[0].name
        }

        this.buttonTarget.innerText = t.choose_another_image
      }

      reader.readAsDataURL(files[0])
    }
  }
}