Adding File Validation to Lexxy Editor with Stimulus.

When using Lexxy as a text editor, one thing I wanted was more control over which files users could attach. For example, I didn’t want people to upload huge videos or unsupported formats.

Since my Rails app already uses Stimulus, I wrote a small controller that listens to Lexxy’s file-accept event and blocks files that don’t meet the rules. This way, the editor stays lightweight, and validation logic remains in my own hands.

Stimulus Controller for Lexxy Attachments

Here’s the controller file I’m using. It checks for file type and size, then prevents Lexxy from accepting files that don’t match the rules.

// lexxy_controller.js
import { Controller } from '@hotwired/stimulus'

export default class extends Controller {
  static values = {
    maxBytes: { type: Number, default: 5 * 1024 * 1024 },
    types: { type: Array, default: ['image/jpeg', 'image/png', 'application/pdf'] }
  }

  connect () {
    this.attachments = this.element.getAttribute('attachments') !== 'false'
    if (this.attachments) {
      this._boundOnAttachmentsAccept = this._onAttachmentsAccept.bind(this)
      this.element.addEventListener('lexxy:file-accept', this._boundOnAttachmentsAccept)
    }
  }

  disconnect () {
    if (this.attachments && this._boundOnAttachmentsAccept) {
      this.element.removeEventListener('lexxy:file-accept', this._boundOnAttachmentsAccept)
    }
  }

  _onAttachmentsAccept(event) {
    const file = event.detail?.file
    if (!file) return

    if (!this.typesValue.includes(file.type)) {
      event.preventDefault()
      window.alert(`File type not allowed. We only accept ${this.typesValue.join(', ')}.`)
      return
    }

    if (file.size > this.maxBytesValue) {
      event.preventDefault()
      const maxMB = (this.maxBytesValue / 1048576).toFixed(1)
      window.alert(`File too large. Maximum ${maxMB} MB allowed.`)
    }
  }
}

Conclusion

This example uses plain alert() calls to reject unwanted uploads, but in a production app you’ll probably want to show errors in a more user-friendly way.

Still, this controller provides a simple, Stimulus-friendly way to enforce rules on file uploads in Lexxy — keeping your editor flexible while giving you full control over what gets attached.