Customize Attachment Preview URL

README.md

@@ -300,6 +300,27 @@ To store attachments, listen for the `trix-attachment-add` event. Upload the att
 
 If you don’t want to accept dropped or pasted files, call `preventDefault()` on the `trix-file-accept` event, which Trix dispatches just before the `trix-attachment-add` event.
 
+## Previewing Attached Files
+
+Trix automatically previews attached image files. To determine whether or not to preview an attached file, Trix compares the file's content type against the [Trix.Attachment.previewablePattern](./src/trix/models/attachment.js#L7). By default, Trix will preview the following content types:
+
+* `image/gif`
+* `image/png`
+* `image/webp`
+* `image/jpg`
+* `image/jpeg`
+
+To customize an attachment's preview, listen for the `trix-attachment-add` event. When handling the event, set the attachment's `previewable` attribute, then change its preview URL by calling `setPreviewURL`:
+
+```js
+addEventListener("trix-attachment-add", (event) => {
+  if (event.attachment.file instanceof File) {
+    event.attachment.setAttribute("previewable", true)
+    event.attachment.setPreviewURL("...")
+  }
+})
+```
+
 # Editing Text Programmatically
 
 You can manipulate a Trix editor programmatically through the `Trix.Editor` interface, available on each `<trix-editor>` element through its `editor` property.

src/test/system/attachment_test.js

@@ -156,6 +156,29 @@ testGroup("Attachments", { template: "editor_with_image" }, () => {
       assert.textAttributes([ 1, 2 ], {})
       expectDocument(`${OBJECT_REPLACEMENT_CHARACTER}${OBJECT_REPLACEMENT_CHARACTER}\n`)
     })
+
+    test("setting previewURL makes an Attachment previewable", async () => {
+      getEditorElement().addEventListener("trix-attachment-add", async ({ attachment }) => {
+        attachment.setAttribute("previewable", true)
+        attachment.setPreviewURL("/loading.png")
+
+        await delay(50)
+
+        attachment.setPreviewURL("/loaded.png")
+      }, { once: true })
+
+      getComposition().insertFile(createFile())
+
+      const loadingImg = getEditorElement().querySelector("img")
+
+      assert.ok(/loading.png$/.test(loadingImg.src), "sets previewURL to loading image")
+
+      await delay(50)
+
+      const loadedImg = getEditorElement().querySelector("img")
+
+      assert.ok(/loaded.png$/.test(loadedImg.src), "sets previewURL to loaded image")
+    })
   })
 })
 

src/trix/models/attachment.js

@@ -32,6 +32,10 @@ export default class Attachment extends TrixObject {
     this.didChangeAttributes()
   }
 
+  setAttribute(attribute, value) {
+    this.setAttributes({ [attribute]: value })
+  }
+
   getAttribute(attribute) {
     return this.attributes.get(attribute)
   }

src/trix/models/managed_attachment.js

@@ -23,6 +23,8 @@ ManagedAttachment.proxyMethod("attachment.setAttributes")
 ManagedAttachment.proxyMethod("attachment.isPending")
 ManagedAttachment.proxyMethod("attachment.isPreviewable")
 ManagedAttachment.proxyMethod("attachment.getURL")
+ManagedAttachment.proxyMethod("attachment.getPreviewURL")
+ManagedAttachment.proxyMethod("attachment.setPreviewURL")
 ManagedAttachment.proxyMethod("attachment.getHref")
 ManagedAttachment.proxyMethod("attachment.getFilename")
 ManagedAttachment.proxyMethod("attachment.getFilesize")