[Fix #49104] Add server response (xhr) to direct-upload:error event.

activestorage/CHANGELOG.md

@@ -1,3 +1,32 @@
+*   Add `xhr` object to direct-upload:error event so that server generated error messages are accessible.
+
+    Before:
+    ```javascript
+    addEventListener("direct-upload:error", event => {
+      event.preventDefault()
+      const { id, error } = event.detail
+      const element = document.getElementById(`direct-upload-${id}`)
+      element.classList.add("direct-upload--error")
+      element.setAttribute("title", error)
+    })
+    ```
+
+    After:
+    ```javascript
+    addEventListener("direct-upload:error", event => {
+      event.preventDefault()
+      const { id, error, xhr } = event.detail
+      const element = document.getElementById(`direct-upload-${id}`)
+      const errorMessage = xhr.response['error'] // Example: File size must be less than 100MB
+      element.classList.add("direct-upload--error")
+      element.setAttribute("title", errorMessage)
+    })
+    ```
+
+    Fixes #49104
+
+    *Sean Abrahams*
+
 *   Allow accepting `service` as a proc as well in `has_one_attached` and `has_many_attached`.
 
     *Yogesh Khater*

activestorage/app/javascript/activestorage/blob_record.js

@@ -63,7 +63,10 @@ export class BlobRecord {
   }
 
   requestDidError(event) {
-    this.callback(`Error creating Blob for "${this.file.name}". Status: ${this.status}`)
+    this.callback({
+      xhr: this.xhr,
+      message: `Error creating Blob for "${this.file.name}". Status: ${this.status}`
+    })
   }
 
   toJSON() {

activestorage/app/javascript/activestorage/blob_upload.js

@@ -30,6 +30,9 @@ export class BlobUpload {
   }
 
   requestDidError(event) {
-    this.callback(`Error storing "${this.file.name}". Status: ${this.xhr.status}`)
+    this.callback({
+      xhr: this.xhr,
+      message: `Error storing "${this.file.name}". Status: ${this.xhr.status}`
+    })
   }
 }

activestorage/app/javascript/activestorage/direct_upload_controller.js

@@ -48,7 +48,7 @@ export class DirectUploadController {
   }
 
   dispatchError(error) {
-    const event = this.dispatch("error", { error })
+    const event = this.dispatch("error", { error: error.message, xhr: error.xhr })
     if (!event.defaultPrevented) {
       alert(error)
     }