@rails/activestorage 8.0.300 → 8.1.0-rc1

package/README.md

@@ -1,6 +1,6 @@
 # Active Storage
 
-Active Storage makes it simple to upload and reference files in cloud services like [Amazon S3](https://aws.amazon.com/s3/), [Google Cloud Storage](https://cloud.google.com/storage/docs/), or [Microsoft Azure Storage](https://azure.microsoft.com/en-us/services/storage/), and attach those files to Active Records. Supports having one main service and mirrors in other services for redundancy. It also provides a disk service for testing or local deployments, but the focus is on cloud storage.
+Active Storage makes it simple to upload and reference files in cloud services like [Amazon S3](https://aws.amazon.com/s3/), or [Google Cloud Storage](https://cloud.google.com/storage/docs/), and attach those files to Active Records. Supports having one main service and mirrors in other services for redundancy. It also provides a disk service for testing or local deployments, but the focus is on cloud storage.
 
 Files can be uploaded from the server to the cloud or directly from the client to the cloud.
 
@@ -173,7 +173,10 @@ Active Storage, with its included JavaScript library, supports uploading directl
     ```erb
     <%= form.file_field :attachments, multiple: true, direct_upload: true %>
     ```
-3. That's it! Uploads begin upon form submission.
+
+3. Configure CORS on third-party storage services to allow direct upload requests.
+
+4. That's it! Uploads begin upon form submission.
 
 ### Direct upload JavaScript events
 

package/app/assets/javascripts/activestorage.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;
+    }
   }
 }
 

package/app/assets/javascripts/activestorage.js

@@ -662,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
@@ -697,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])";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rails/activestorage",
-  "version": "8.0.300",
+  "version": "8.1.0-rc1",
   "description": "Attach cloud and local files in Rails applications",
   "module": "app/assets/javascripts/activestorage.esm.js",
   "main": "app/assets/javascripts/activestorage.js",
@@ -22,10 +22,12 @@
     "spark-md5": "^3.0.1"
   },
   "devDependencies": {
+    "@eslint/js": "^9.24.0",
     "@rollup/plugin-node-resolve": "^11.0.1",
     "@rollup/plugin-commonjs": "^19.0.1",
-    "eslint": "^8.40.0",
-    "eslint-plugin-import": "^2.29.0",
+    "eslint": "^9.24.0",
+    "eslint-plugin-import": "^2.31.0",
+    "globals": "^14.0.0",
     "rollup": "^2.35.1",
     "rollup-plugin-terser": "^7.0.2"
   },

package/src/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
+    }
   }
 }