Upload progress accounts for server processing time

Progress bars now reflect the full upload lifecycle: 90% for request
transmission, 10% for server processing and response. Prevents progress
bars from completing prematurely while the server is still processing
buffered uploads, giving the impression that something has failed or
stalled.

Progress reporting is split into two phases:
- 0-90%: Request transmission. Actual upload progress.
- 90-100%: Server processing time, estimated based on file size:
  - 1s for <1MB; 2s for 1-10MB; 3s+ for larger files

The 90/10 split reflects that most direct uploads are unbuffered and
complete quickly after transmission. Even buffered uploads typically
process faster than their upload time.

No app changes required for apps using Active Storage or Action Text.
Progress events dispatch with the same `{ progress: number }` format.

Fixes rails#42228

Author: jeremy

actiontext/CHANGELOG.md

@@ -1,3 +1,7 @@
+*   Attachment upload progress accounts for server processing time.
+
+    *Jeremy Daer*
+
 *   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`.

actiontext/app/javascript/actiontext/attachment_upload.js

@@ -14,12 +14,61 @@ export class AttachmentUpload {
 
   directUploadWillStoreFileWithXHR(xhr) {
     xhr.upload.addEventListener("progress", event => {
-      const progress = event.loaded / event.total * 100
+      // Scale upload progress to 0-90% range
+      const progress = (event.loaded / event.total) * 90
       this.attachment.setUploadProgress(progress)
       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.attachment.setUploadProgress(progress)
+      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.attachment.setUploadProgress(100)
+      this.dispatch("progress", { progress: 100 })
+    })
+
+    requestAnimationFrame(updateProgress)
+  }
+
+  estimateResponseTime() {
+    // Base estimate: 1 second for small files, scaling up for larger files
+    const fileSize = this.attachment.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) {

activestorage/CHANGELOG.md

@@ -1,3 +1,7 @@
+*   Direct upload progress accounts for server processing time.
+
+    *Jeremy Daer*
+
 *   Delegate `ActiveStorage::Filename#to_str` to `#to_s`
 
     Supports checking String equality:

activestorage/app/javascript/activestorage/direct_upload_controller.js

@@ -31,7 +31,8 @@ export class DirectUploadController {
   }
 
   uploadRequestDidProgress(event) {
-    const progress = event.loaded / event.total * 100
+    // Scale upload progress to 0-90% range
+    const progress = (event.loaded / event.total) * 90
     if (progress) {
       this.dispatch("progress", { progress })
     }
@@ -63,5 +64,51 @@ export class DirectUploadController {
   directUploadWillStoreFileWithXHR(xhr) {
     this.dispatch("before-storage-request", { xhr })
     xhr.upload.addEventListener("progress", event => this.uploadRequestDidProgress(event))
+
+    // 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
+    }
   }
 }