https://la-voyageuse.herokuapp.com/assets/controllers/upload_trix_…28fec87362554769dcdd3556b20c7302aaaf3eee.js

1import { Controller } from "@hotwired/stimulus"
2
3export default class extends Controller {
4  // inspired by https://blog.saeloun.com/2019/11/12/attachments-in-action-text-rails-6.html
5
6  initialize() {
7    // console.log("Hello from Trix Upload controller");
8    this.maxMegaSize = 2 // MB
9    this.acceptedTypes = ['image/jpeg', 'image/png']
10    this.bindedHandleUpload = this.handleTrixUpload.bind(this)
11    this.errors = JSON.parse(this.element.dataset.errors)
12  }
13
14  connect () {
15    window.addEventListener("trix-file-accept", this.bindedHandleUpload)
16  }
17
18  disconnect () {
19    window.removeEventListener("trix-file-accept", this.bindedHandleUpload)
20  }
21
22  handleTrixUpload (event) {
23    if( this.checkFileType(event) ) this.checkFileSize(event)
24  }
25
26  checkFileType (event) {
27    if (this.acceptedTypes.includes(event.file.type)) {
28      return true
29    } else{
30      event.preventDefault()
31      alert(this.errors.file_type)
32      return false
33    }
34  }
35
36  checkFileSize (event) {
37    if (event.file.size / 1000000 > this.maxMegaSize) {
38      event.preventDefault()
39      this.dispatchFlash("warning", `${this.errors.file_size} ${this.maxMegaSize}MB`)
40    }
41  }
42
43  dispatchFlash (type, message) {
44    const event = new CustomEvent("flashDispatch", {detail: {type: type, message: message}});
45    window.dispatchEvent(event);
46  }
47
48};