Disable Attachments in the Trix Editor
A drop-in Stimulus controller that strips the attachment button, blocks pasted images, and disables file uploads in Rails' Trix editor.
Use this stimulus controller to quickly disable attachments in the Trix Editor.
When you need to disable attachments in the Trix editor you’ll need to make sure you do three things:
- Remove the file attachment button from the Trix editor
- Disable copy/paste of attachments
- Disable all attachments
You can do this with the following stimulus controller:
Save this as disable_uploads_controller.rb
import {Controller} from "@hotwired/stimulus"
export default class extends Controller {
connect() { // Disable trix uploads: https://github.com/basecamp/trix/issues/604#issuecomment-600974875
// Get rid of the upload button document.addEventListener("trix-initialize", function(e) { const fileTools = document.querySelector(".trix-button-group--file-tools"); // null check hack: trix-initialize gets called twice for some reason, sometimes it is null :shrug: fileTools?.remove(); });
// Dont allow images/etc to be pasted document.addEventListener("trix-attachment-add", function(event) { if (!event.attachment.file) { event.attachment.remove() } })
// No files, ever document.addEventListener("trix-file-accept", function(event) { event.preventDefault(); }); }}Once included in your /app/javascript/controllers/ folder, you would apply it like this in a Rails form:
<div data-controller="disable-uploads"> <%= form.label :body %> <%= form.rich_text_area :body %> </div>That’s it.
Bonus
What if you only wanted to allow images of type png, jpeg and gif in your Trix editor? You can do that with another stimulus controller as well:
Save this as images_only_controller.rb
import {Controller} from "@hotwired/stimulus"
export default class extends Controller { connect() { document.addEventListener("trix-file-accept", function(event) { const acceptedTypes = ['image/jpeg', 'image/png', 'image/gif'] if (!acceptedTypes.includes(event.file.type)) { event.preventDefault() alert("We only support jpeg, png or gif files") } }) }}Apply it like this:
<div data-controller="images-only"> <%= form.label :body %> <%= form.rich_text_area :body %> </div>Now, file attachments will be possible, but only if the file type is jpeg, png, or gif. Adjust as you deem necessary.
