actiontext 8.0.3 → 8.1.0.rc1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3b81c8405c83266d51dc6c55079aa626c20dda10a35553bfe079a2408d5b6693
-  data.tar.gz: d7a7e71c2fe3dfbda11d7460c0576c1d01e05eb5c67707de15aa7dfaa479890f
+  metadata.gz: 8f8a237e651fd987b5cd33e599577648aedf8a2ff14decaee0b2a3c2b2c6ab1c
+  data.tar.gz: 9a84f4bb3bc90cddc9c651e3571ee872a87add9150b33e28d3eef50e728493f3
 SHA512:
-  metadata.gz: 52b350b3484af8bdbb39cee82c410e2342773e1747c2554379ca9b838c333a95ee1c49c863faf5e2648544b92e9f1c162bd80f37a45434069fe5b0e8c894634d
-  data.tar.gz: b5aeb2c5cdde40c910b608de82a946c7af408351b57582ca441f704a5b8aac58832a71ab4de2cca2107a91745303d2edf811e229197cdd966a8479fb256d1f9d
+  metadata.gz: c3fb8c1e86cd5017a454ba8615db889b4775ea0afe9f276fcfb46ed2b82583a85a6a11daf097624104a1600753b9c995c5dd7720ce289499fab9d7e57814ab22
+  data.tar.gz: 340ac8fc6e495d800d75ba68c205b9213d34e2cc925b542e4f46eb32fcdebda2fe4d439125219bc6d1cab4b3b01789034e0c163e23868c51c5293c294db06d31

data/CHANGELOG.md

@@ -1,92 +1,65 @@
-## Rails 8.0.3 (September 22, 2025) ##
+## Rails 8.1.0.rc1 (October 15, 2025) ##
 
-*   Add rollup-plugin-terser as a dev dependency.
+*   De-couple `@rails/actiontext/attachment_upload.js` from `Trix.Attachment`
 
-    *Édouard Chin*
-
-
-## Rails 8.0.2.1 (August 13, 2025) ##
-
-*   No changes.
-
-
-## Rails 8.0.2 (March 12, 2025) ##
-
-*   No changes.
-
-## Rails 8.0.2 (March 12, 2025) ##
-
-*   No changes.
-
-
-## Rails 8.0.1 (December 13, 2024) ##
-
-*   No changes.
-
-
-## Rails 8.0.0.1 (December 10, 2024) ##
-
-*   Update vendored trix version to 2.1.10
-
-    *John Hawthorn*
-
-
-## Rails 8.0.0 (November 07, 2024) ##
-
-*   No changes.
-
-
-## Rails 8.0.0.rc2 (October 30, 2024) ##
-
-*   No changes.
-
-
-## Rails 8.0.0.rc1 (October 19, 2024) ##
-
-*   No changes.
+    Implement `@rails/actiontext/index.js` with a `direct-upload:progress` event
+    listeners and `Promise` resolution.
 
+    *Sean Doyle*
 
-## Rails 8.0.0.beta1 (September 26, 2024) ##
+*   Capture block content for form helper methods
+
+    ```erb
+    <%= rich_textarea_tag :content, nil do %>
+      <h1>hello world</h1>
+    <% end %>
+    <!-- <input type="hidden" name="content" id="trix_input_1" value="&lt;h1&gt;hello world&lt;/h1&gt;"/><trix-editor … -->
+
+    <%= rich_textarea :message, :content, input: "trix_input_1" do %>
+      <h1>hello world</h1>
+    <% end %>
+    <!-- <input type="hidden" name="message[content]" id="trix_input_1" value="&lt;h1&gt;hello world&lt;/h1&gt;"/><trix-editor … -->
+
+    <%= form_with model: Message.new do |form| %>
+      <%= form.rich_textarea :content do %>
+        <h1>hello world</h1>
+      <% end %>
+    <% end %>
+    <!-- <form action="/messages" accept-charset="UTF-8" method="post"><input type="hidden" name="message[content]" id="message_content_trix_input_message" value="&lt;h1&gt;hello world&lt;/h1&gt;"/><trix-editor … -->
+    ```
 
-*   Dispatch direct-upload events on attachment uploads
+    *Sean Doyle*
 
-    When using Action Text's rich textarea,  it's possible to attach files to the
-    editor. Previously, that action didn't dispatch any events, which made it hard
-    to react to the file uploads. For instance, if an upload failed, there was no
-    way to notify the user about it, or remove the attachment from the editor.
+*   Generalize `:rich_text_area` Capybara selector
 
-    This commits adds new events - `direct-upload:start`, `direct-upload:progress`,
-    and `direct-upload:end` - similar to how Active Storage's direct uploads work.
+    Prepare for more Action Text-capable WYSIWYG editors by making
+    `:rich_text_area` rely on the presence of `[role="textbox"]` and
+    `[contenteditable]` HTML attributes rather than a `<trix-editor>` element.
 
-    *Matheus Richard*, *Brad Rees*
+    *Sean Doyle*
 
-*   Add `store_if_blank` option to `has_rich_text`
+## Rails 8.1.0.beta1 (September 04, 2025) ##
 
-    Pass `store_if_blank: false` to not create `ActionText::RichText` records when saving with a blank attribute, such as from an optional form parameter.
+*   Forward `fill_in_rich_text_area` options to Capybara
 
     ```ruby
-    class Message
-      has_rich_text :content, store_if_blank: false
-    end
-
-    Message.create(content: "hi") # creates an ActionText::RichText
-    Message.create(content: "") # does not create an ActionText::RichText
+    fill_in_rich_textarea "Rich text editor", id: "trix_editor_1", with: "Hello world!"
     ```
 
-    *Alex Ghiculescu*
-
-*   Strip `content` attribute if the key is present but the value is empty
+    *Sean Doyle*
 
-    *Jeremy Green*
+*   Attachment upload progress accounts for server processing time.
 
-*   Rename `rich_text_area` methods into `rich_textarea`
+    *Jeremy Daer*
 
-    Old names are still available as aliases.
+*   The Trix dependency is now satisfied by a gem, `action_text-trix`, rather than vendored
+    files. This allows applications to bump Trix versions independently of Rails
+    releases. Effectively this also upgrades Trix to `>= 2.1.15`.
 
-    *Sean Doyle*
+    *Mike Dalessio*
 
-*   Only sanitize `content` attribute when present in attachments.
+*   Change `ActionText::RichText#embeds` assignment from `before_save` to `before_validation`
 
-    *Petrik de Heus*
+    *Sean Doyle*
 
-Please check [7-2-stable](https://github.com/rails/rails/blob/7-2-stable/actiontext/CHANGELOG.md) for previous changes.
+Please check [8-0-stable](https://github.com/rails/rails/blob/8-0-stable/actiontext/CHANGELOG.md) for previous changes.

data/app/assets/javascripts/actiontext.esm.js

@@ -672,7 +672,7 @@ class DirectUploadController {
     }));
   }
   uploadRequestDidProgress(event) {
-    const progress = event.loaded / event.total * 100;
+    const progress = event.loaded / event.total * 90;
     if (progress) {
       this.dispatch("progress", {
         progress: progress
@@ -707,6 +707,42 @@ class DirectUploadController {
       xhr: xhr
     });
     xhr.upload.addEventListener("progress", (event => this.uploadRequestDidProgress(event)));
+    xhr.upload.addEventListener("loadend", (() => {
+      this.simulateResponseProgress(xhr);
+    }));
+  }
+  simulateResponseProgress(xhr) {
+    let progress = 90;
+    const startTime = Date.now();
+    const updateProgress = () => {
+      const elapsed = Date.now() - startTime;
+      const estimatedResponseTime = this.estimateResponseTime();
+      const responseProgress = Math.min(elapsed / estimatedResponseTime, 1);
+      progress = 90 + responseProgress * 9;
+      this.dispatch("progress", {
+        progress: progress
+      });
+      if (xhr.readyState !== XMLHttpRequest.DONE && progress < 99) {
+        requestAnimationFrame(updateProgress);
+      }
+    };
+    xhr.addEventListener("loadend", (() => {
+      this.dispatch("progress", {
+        progress: 100
+      });
+    }));
+    requestAnimationFrame(updateProgress);
+  }
+  estimateResponseTime() {
+    const fileSize = this.file.size;
+    const MB = 1024 * 1024;
+    if (fileSize < MB) {
+      return 1e3;
+    } else if (fileSize < 10 * MB) {
+      return 2e3;
+    } else {
+      return 3e3 + fileSize / MB * 50;
+    }
   }
 }
 
@@ -846,31 +882,69 @@ function autostart() {
 setTimeout(autostart, 1);
 
 class AttachmentUpload {
-  constructor(attachment, element) {
+  constructor(attachment, element, file = attachment.file) {
     this.attachment = attachment;
     this.element = element;
-    this.directUpload = new DirectUpload(attachment.file, this.directUploadUrl, this);
+    this.directUpload = new DirectUpload(file, this.directUploadUrl, this);
+    this.file = file;
   }
   start() {
-    this.directUpload.create(this.directUploadDidComplete.bind(this));
-    this.dispatch("start");
+    return new Promise(((resolve, reject) => {
+      this.directUpload.create(((error, attributes) => this.directUploadDidComplete(error, attributes, resolve, reject)));
+      this.dispatch("start");
+    }));
   }
   directUploadWillStoreFileWithXHR(xhr) {
     xhr.upload.addEventListener("progress", (event => {
-      const progress = event.loaded / event.total * 100;
-      this.attachment.setUploadProgress(progress);
+      const progress = event.loaded / event.total * 90;
       if (progress) {
         this.dispatch("progress", {
           progress: progress
         });
       }
     }));
+    xhr.upload.addEventListener("loadend", (() => {
+      this.simulateResponseProgress(xhr);
+    }));
   }
-  directUploadDidComplete(error, attributes) {
+  simulateResponseProgress(xhr) {
+    let progress = 90;
+    const startTime = Date.now();
+    const updateProgress = () => {
+      const elapsed = Date.now() - startTime;
+      const estimatedResponseTime = this.estimateResponseTime();
+      const responseProgress = Math.min(elapsed / estimatedResponseTime, 1);
+      progress = 90 + responseProgress * 9;
+      this.dispatch("progress", {
+        progress: progress
+      });
+      if (xhr.readyState !== XMLHttpRequest.DONE && progress < 99) {
+        requestAnimationFrame(updateProgress);
+      }
+    };
+    xhr.addEventListener("loadend", (() => {
+      this.dispatch("progress", {
+        progress: 100
+      });
+    }));
+    requestAnimationFrame(updateProgress);
+  }
+  estimateResponseTime() {
+    const fileSize = this.file.size;
+    const MB = 1024 * 1024;
+    if (fileSize < MB) {
+      return 1e3;
+    } else if (fileSize < 10 * MB) {
+      return 2e3;
+    } else {
+      return 3e3 + fileSize / MB * 50;
+    }
+  }
+  directUploadDidComplete(error, attributes, resolve, reject) {
     if (error) {
-      this.dispatchError(error);
+      this.dispatchError(error, reject);
     } else {
-      this.attachment.setAttributes({
+      resolve({
         sgid: attributes.attachable_sgid,
         url: this.createBlobUrl(attributes.signed_id, attributes.filename)
       });
@@ -886,12 +960,12 @@ class AttachmentUpload {
       detail: detail
     });
   }
-  dispatchError(error) {
+  dispatchError(error, reject) {
     const event = this.dispatch("error", {
       error: error
     });
     if (!event.defaultPrevented) {
-      alert(error);
+      reject(error);
     }
   }
   get directUploadUrl() {
@@ -905,7 +979,11 @@ class AttachmentUpload {
 addEventListener("trix-attachment-add", (event => {
   const {attachment: attachment, target: target} = event;
   if (attachment.file) {
-    const upload = new AttachmentUpload(attachment, target);
-    upload.start();
+    const upload = new AttachmentUpload(attachment, target, attachment.file);
+    const onProgress = event => attachment.setUploadProgress(event.detail.progress);
+    target.addEventListener("direct-upload:progress", onProgress);
+    upload.start().then((attributes => attachment.setAttributes(attributes))).catch((error => alert(error))).finally((() => target.removeEventListener("direct-upload:progress", onProgress)));
   }
 }));
+
+export { AttachmentUpload };

data/app/assets/javascripts/actiontext.js

@@ -1,6 +1,7 @@
-(function(factory) {
-  typeof define === "function" && define.amd ? define(factory) : factory();
-})((function() {
+(function(global, factory) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports) : typeof define === "function" && define.amd ? define([ "exports" ], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, 
+  factory(global.ActionText = {}));
+})(this, (function(exports) {
   "use strict";
   var sparkMd5 = {
     exports: {}
@@ -661,7 +662,7 @@
       }));
     }
     uploadRequestDidProgress(event) {
-      const progress = event.loaded / event.total * 100;
+      const progress = event.loaded / event.total * 90;
       if (progress) {
         this.dispatch("progress", {
           progress: progress
@@ -696,6 +697,42 @@
         xhr: xhr
       });
       xhr.upload.addEventListener("progress", (event => this.uploadRequestDidProgress(event)));
+      xhr.upload.addEventListener("loadend", (() => {
+        this.simulateResponseProgress(xhr);
+      }));
+    }
+    simulateResponseProgress(xhr) {
+      let progress = 90;
+      const startTime = Date.now();
+      const updateProgress = () => {
+        const elapsed = Date.now() - startTime;
+        const estimatedResponseTime = this.estimateResponseTime();
+        const responseProgress = Math.min(elapsed / estimatedResponseTime, 1);
+        progress = 90 + responseProgress * 9;
+        this.dispatch("progress", {
+          progress: progress
+        });
+        if (xhr.readyState !== XMLHttpRequest.DONE && progress < 99) {
+          requestAnimationFrame(updateProgress);
+        }
+      };
+      xhr.addEventListener("loadend", (() => {
+        this.dispatch("progress", {
+          progress: 100
+        });
+      }));
+      requestAnimationFrame(updateProgress);
+    }
+    estimateResponseTime() {
+      const fileSize = this.file.size;
+      const MB = 1024 * 1024;
+      if (fileSize < MB) {
+        return 1e3;
+      } else if (fileSize < 10 * MB) {
+        return 2e3;
+      } else {
+        return 3e3 + fileSize / MB * 50;
+      }
     }
   }
   const inputSelector = "input[type=file][data-direct-upload-url]:not([disabled])";
@@ -819,31 +856,69 @@
   }
   setTimeout(autostart, 1);
   class AttachmentUpload {
-    constructor(attachment, element) {
+    constructor(attachment, element, file = attachment.file) {
       this.attachment = attachment;
       this.element = element;
-      this.directUpload = new DirectUpload(attachment.file, this.directUploadUrl, this);
+      this.directUpload = new DirectUpload(file, this.directUploadUrl, this);
+      this.file = file;
     }
     start() {
-      this.directUpload.create(this.directUploadDidComplete.bind(this));
-      this.dispatch("start");
+      return new Promise(((resolve, reject) => {
+        this.directUpload.create(((error, attributes) => this.directUploadDidComplete(error, attributes, resolve, reject)));
+        this.dispatch("start");
+      }));
     }
     directUploadWillStoreFileWithXHR(xhr) {
       xhr.upload.addEventListener("progress", (event => {
-        const progress = event.loaded / event.total * 100;
-        this.attachment.setUploadProgress(progress);
+        const progress = event.loaded / event.total * 90;
         if (progress) {
           this.dispatch("progress", {
             progress: progress
           });
         }
       }));
+      xhr.upload.addEventListener("loadend", (() => {
+        this.simulateResponseProgress(xhr);
+      }));
+    }
+    simulateResponseProgress(xhr) {
+      let progress = 90;
+      const startTime = Date.now();
+      const updateProgress = () => {
+        const elapsed = Date.now() - startTime;
+        const estimatedResponseTime = this.estimateResponseTime();
+        const responseProgress = Math.min(elapsed / estimatedResponseTime, 1);
+        progress = 90 + responseProgress * 9;
+        this.dispatch("progress", {
+          progress: progress
+        });
+        if (xhr.readyState !== XMLHttpRequest.DONE && progress < 99) {
+          requestAnimationFrame(updateProgress);
+        }
+      };
+      xhr.addEventListener("loadend", (() => {
+        this.dispatch("progress", {
+          progress: 100
+        });
+      }));
+      requestAnimationFrame(updateProgress);
+    }
+    estimateResponseTime() {
+      const fileSize = this.file.size;
+      const MB = 1024 * 1024;
+      if (fileSize < MB) {
+        return 1e3;
+      } else if (fileSize < 10 * MB) {
+        return 2e3;
+      } else {
+        return 3e3 + fileSize / MB * 50;
+      }
     }
-    directUploadDidComplete(error, attributes) {
+    directUploadDidComplete(error, attributes, resolve, reject) {
       if (error) {
-        this.dispatchError(error);
+        this.dispatchError(error, reject);
       } else {
-        this.attachment.setAttributes({
+        resolve({
           sgid: attributes.attachable_sgid,
           url: this.createBlobUrl(attributes.signed_id, attributes.filename)
         });
@@ -859,12 +934,12 @@
         detail: detail
       });
     }
-    dispatchError(error) {
+    dispatchError(error, reject) {
       const event = this.dispatch("error", {
         error: error
       });
       if (!event.defaultPrevented) {
-        alert(error);
+        reject(error);
       }
     }
     get directUploadUrl() {
@@ -877,8 +952,14 @@
   addEventListener("trix-attachment-add", (event => {
     const {attachment: attachment, target: target} = event;
     if (attachment.file) {
-      const upload = new AttachmentUpload(attachment, target);
-      upload.start();
+      const upload = new AttachmentUpload(attachment, target, attachment.file);
+      const onProgress = event => attachment.setUploadProgress(event.detail.progress);
+      target.addEventListener("direct-upload:progress", onProgress);
+      upload.start().then((attributes => attachment.setAttributes(attributes))).catch((error => alert(error))).finally((() => target.removeEventListener("direct-upload:progress", onProgress)));
     }
   }));
+  exports.AttachmentUpload = AttachmentUpload;
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
 }));

data/app/helpers/action_text/tag_helper.rb

@@ -27,7 +27,14 @@ module ActionText
     #     rich_textarea_tag "content", message.content
     #     # <input type="hidden" name="content" id="trix_input_post_1">
     #     # <trix-editor id="content" input="trix_input_post_1" class="trix-content" ...></trix-editor>
-    def rich_textarea_tag(name, value = nil, options = {})
+    #
+    #     rich_textarea_tag "content", nil do
+    #       "<h1>Default content</h1>"
+    #     end
+    #     # <input type="hidden" name="content" id="trix_input_post_1" value="&lt;h1&gt;Default content&lt;/h1&gt;">
+    #     # <trix-editor id="content" input="trix_input_post_1" class="trix-content" ...></trix-editor>
+    def rich_textarea_tag(name, value = nil, options = {}, &block)
+      value = capture(&block) if value.nil? && block_given?
       options = options.symbolize_keys
       form = options.delete(:form)
 
@@ -53,11 +60,11 @@ module ActionView::Helpers
 
     delegate :dom_id, to: ActionView::RecordIdentifier
 
-    def render
+    def render(&block)
       options = @options.stringify_keys
       add_default_name_and_field(options)
       options["input"] ||= dom_id(object, [options["id"], :trix_input].compact.join("_")) if object
-      html_tag = @template_object.rich_textarea_tag(options.delete("name"), options.fetch("value") { value }, options.except("value"))
+      html_tag = @template_object.rich_textarea_tag(options.delete("name"), options.fetch("value") { value }, options.except("value"), &block)
       error_wrapping(html_tag)
     end
   end
@@ -82,10 +89,16 @@ module ActionView::Helpers
     #     # <trix-editor id="content" input="message_content_trix_input_message_1" class="trix-content" ...></trix-editor>
     #
     #     rich_textarea :message, :content, value: "<h1>Default message</h1>"
-    #     # <input type="hidden" name="message[content]" id="message_content_trix_input_message_1" value="<h1>Default message</h1>">
+    #     # <input type="hidden" name="message[content]" id="message_content_trix_input_message_1" value="&lt;h1&gt;Default message&lt;/h1&gt;">
+    #     # <trix-editor id="content" input="message_content_trix_input_message_1" class="trix-content" ...></trix-editor>
+    #
+    #     rich_textarea :message, :content do
+    #       "<h1>Default message</h1>"
+    #     end
+    #     # <input type="hidden" name="message[content]" id="message_content_trix_input_message_1" value="&lt;h1&gt;Default message&lt;/h1&gt;">
     #     # <trix-editor id="content" input="message_content_trix_input_message_1" class="trix-content" ...></trix-editor>
-    def rich_textarea(object_name, method, options = {})
-      Tags::ActionText.new(object_name, method, self, options).render
+    def rich_textarea(object_name, method, options = {}, &block)
+      Tags::ActionText.new(object_name, method, self, options).render(&block)
     end
     alias_method :rich_text_area, :rich_textarea
   end
@@ -98,8 +111,8 @@ module ActionView::Helpers
     #     <% end %>
     #
     # Please refer to the documentation of the base helper for details.
-    def rich_textarea(method, options = {})
-      @template.rich_textarea(@object_name, method, objectify_options(options))
+    def rich_textarea(method, options = {}, &block)
+      @template.rich_textarea(@object_name, method, objectify_options(options), &block)
     end
     alias_method :rich_text_area, :rich_textarea
   end

data/app/javascript/actiontext/attachment_upload.js

@@ -1,32 +1,81 @@
 import { DirectUpload, dispatchEvent } from "@rails/activestorage"
 
 export class AttachmentUpload {
-  constructor(attachment, element) {
+  constructor(attachment, element, file = attachment.file) {
     this.attachment = attachment
     this.element = element
-    this.directUpload = new DirectUpload(attachment.file, this.directUploadUrl, this)
+    this.directUpload = new DirectUpload(file, this.directUploadUrl, this)
+    this.file = file
   }
 
   start() {
-    this.directUpload.create(this.directUploadDidComplete.bind(this))
-    this.dispatch("start")
+    return new Promise((resolve, reject) => {
+      this.directUpload.create((error, attributes) => this.directUploadDidComplete(error, attributes, resolve, reject))
+      this.dispatch("start")
+    })
   }
 
   directUploadWillStoreFileWithXHR(xhr) {
     xhr.upload.addEventListener("progress", event => {
-      const progress = event.loaded / event.total * 100
-      this.attachment.setUploadProgress(progress)
+      // Scale upload progress to 0-90% range
+      const progress = (event.loaded / event.total) * 90
       if (progress) {
         this.dispatch("progress", { progress: progress })
       }
     })
+
+    // Start simulating progress after upload completes
+    xhr.upload.addEventListener("loadend", () => {
+      this.simulateResponseProgress(xhr)
+    })
+  }
+
+  simulateResponseProgress(xhr) {
+    let progress = 90
+    const startTime = Date.now()
+
+    const updateProgress = () => {
+      // Simulate progress from 90% to 99% over estimated time
+      const elapsed = Date.now() - startTime
+      const estimatedResponseTime = this.estimateResponseTime()
+      const responseProgress = Math.min(elapsed / estimatedResponseTime, 1)
+      progress = 90 + (responseProgress * 9) // 90% to 99%
+
+      this.dispatch("progress", { progress })
+
+      // Continue until response arrives or we hit 99%
+      if (xhr.readyState !== XMLHttpRequest.DONE && progress < 99) {
+        requestAnimationFrame(updateProgress)
+      }
+    }
+
+    // Stop simulation when response arrives
+    xhr.addEventListener("loadend", () => {
+      this.dispatch("progress", { progress: 100 })
+    })
+
+    requestAnimationFrame(updateProgress)
+  }
+
+  estimateResponseTime() {
+    // Base estimate: 1 second for small files, scaling up for larger files
+    const fileSize = this.file.size
+    const MB = 1024 * 1024
+
+    if (fileSize < MB) {
+      return 1000 // 1 second for files under 1MB
+    } else if (fileSize < 10 * MB) {
+      return 2000 // 2 seconds for files 1-10MB
+    } else {
+      return 3000 + (fileSize / MB * 50) // 3+ seconds for larger files
+    }
   }
 
-  directUploadDidComplete(error, attributes) {
+  directUploadDidComplete(error, attributes, resolve, reject) {
     if (error) {
-      this.dispatchError(error)
+      this.dispatchError(error, reject)
     } else {
-      this.attachment.setAttributes({
+      resolve({
         sgid: attributes.attachable_sgid,
         url: this.createBlobUrl(attributes.signed_id, attributes.filename)
       })
@@ -45,10 +94,10 @@ export class AttachmentUpload {
     return dispatchEvent(this.element, `direct-upload:${name}`, { detail })
   }
 
-  dispatchError(error) {
+  dispatchError(error, reject) {
     const event = this.dispatch("error", { error })
     if (!event.defaultPrevented) {
-      alert(error);
+      reject(error)
     }
   }
 

data/app/javascript/actiontext/index.js

@@ -4,7 +4,16 @@ addEventListener("trix-attachment-add", event => {
   const { attachment, target } = event
 
   if (attachment.file) {
-    const upload = new AttachmentUpload(attachment, target)
+    const upload = new AttachmentUpload(attachment, target, attachment.file)
+    const onProgress = event => attachment.setUploadProgress(event.detail.progress)
+
+    target.addEventListener("direct-upload:progress", onProgress)
+
     upload.start()
+      .then(attributes => attachment.setAttributes(attributes))
+      .catch(error => alert(error))
+      .finally(() => target.removeEventListener("direct-upload:progress", onProgress))
   }
 })
+
+export { AttachmentUpload }