Calculate upload rate

docs/api/class/queue.md

@@ -37,6 +37,10 @@ Upload failures can happen due to a timeout or a server response. If you choose
 | `fileQueue` | The FileQueue service.                                                                                        | `FileQueue`        |
 | `name`      | The unique identifier of the queue.                                                                           | `string \| symbol` |
 | `files`     | The list of files in the queue. This automatically gets flushed when all the files in the queue have settled. | `UploadFile[]`     |
+| `size`      | Total size of all files currently being uploaded in bytes.                                                    | `number`           |
+| `loaded`    | Number of bytes that have been uploaded to the server.                                                        | `number`           |
+| `progress`  | Current progress of all uploads, as a percentage in the range of 0 to 100.                                    | `number`           |
+| `rate`      | Current time in ms it is taking to upload 1 byte.                                                             | `number`           |
 
 ## Methods
 

docs/api/class/upload-file.md

@@ -81,6 +81,7 @@ An object which may be passed as an optional second argument to `upload()` and `
 | `extension` | Returns the appropriate file extension of the file according to the type.                                                   | `string` |
 | `loaded`    | The number of bytes that have been uploaded to the server.                                                                  | `number` |
 | `progress`  | The current progress of the upload, as a percentage in the range of 0 to 100.                                               | `number` |
+| `rate`      | Current time in ms it is taking to upload 1 byte.                                                                           | `number` |
 | `state`     | The current state that the file is in.                                                                                      | `string` |
 | `source`    | The source of the file. This is useful for applications that want to gather analytics about how users upload their content. | `string` |
 

docs/api/service/file-queue-service.md

@@ -29,6 +29,7 @@ import FileQueueService from 'ember-file-upload/services/file-queue';
 | `size`     | The total size of all files currently being uploaded in bytes.                 | `number` |
 | `loaded`   | The number of bytes that have been uploaded to the server.                     | `number` |
 | `progress` | The current progress of all uploads, as a percentage in the range of 0 to 100. | `number` |
+| `rate`     | Current time in ms it is taking to upload 1 byte.                              | `number` |
 
 ## Methods
 

docs/uploading.md

@@ -44,11 +44,12 @@ For more details see the API reference: [Upload Options](../docs/api/class/uploa
 
 In addition to the file list, the queue tracks properties that indicate the progess of your uploads.
 
-| Property | Description |
-| ----- | ----- |
-| queue.size  | `number` – Total size of all files currently being uploaded in bytes. |
-| queue.loaded  | `number` – Number of bytes that have been uploaded to the server. |
-| queue.progress  | `number` – Current progress of all uploads, as a percentage in the range of 0 to 100. |
+| Property       | Description                                                                           |
+| -------------- | ------------------------------------------------------------------------------------- |
+| queue.size     | `number` – Total size of all files currently being uploaded in bytes.                 |
+| queue.loaded   | `number` – Number of bytes that have been uploaded to the server.                     |
+| queue.progress | `number` – Current progress of all uploads, as a percentage in the range of 0 to 100. |
+| queue.rate     | `number` – Current time in ms it is taking to upload 1 byte.                          |
 
 ```hbs
 {{#if queue.files.length}}

ember-file-upload/src/internal.ts

@@ -2,13 +2,21 @@ import DataTransferWrapper from './system/data-transfer-wrapper.ts';
 import HTTPRequest from './system/http-request.ts';
 import UploadFileReader from './system/upload-file-reader.ts';
 import { onloadstart, onprogress, onloadend } from './system/upload.ts';
+import {
+  estimatedRate,
+  generateWeights,
+  proportionForPosition,
+} from './system/rate.ts';
 
 export {
-  // Non-public classes imported by the test app
+  // Non-public modules imported by the test app
   DataTransferWrapper,
   HTTPRequest,
   UploadFileReader,
   onloadstart,
   onprogress,
   onloadend,
+  estimatedRate,
+  generateWeights,
+  proportionForPosition,
 };

ember-file-upload/src/queue.ts

@@ -70,6 +70,19 @@ export class Queue {
     return [...this.#distinctFiles.values()];
   }
 
+  /**
+   * The current time in ms it is taking to upload 1 byte.
+   *
+   * @defaultValue 0
+   */
+  get rate(): number {
+    return this.files
+      .filter((file) => file.state === FileState.Uploading)
+      .reduce((acc, { rate }) => {
+        return acc + rate;
+      }, 0);
+  }
+
   /**
    * The total size of all files currently being uploaded in bytes.
    *

ember-file-upload/src/services/file-queue.ts

@@ -3,7 +3,7 @@ import Service from '@ember/service';
 import { registerDestructor } from '@ember/destroyable';
 import { Queue } from '../queue.ts';
 import type { UploadFile } from '../upload-file.ts';
-import type { QueueName } from '../interfaces.ts';
+import { FileState, type QueueName } from '../interfaces.ts';
 import { TrackedMap } from 'tracked-built-ins';
 
 export const DEFAULT_QUEUE = Symbol('DEFAULT_QUEUE');
@@ -88,6 +88,19 @@ export default class FileQueueService extends Service {
     }, []);
   }
 
+  /**
+   * The current time in ms it is taking to upload 1 byte.
+   *
+   * @defaultValue 0
+   */
+  get rate(): number {
+    return this.files
+      .filter((file) => file.state === FileState.Uploading)
+      .reduce((acc, { rate }) => {
+        return acc + rate;
+      }, 0);
+  }
+
   /**
    * The total size of all files currently being uploaded in bytes.
    *

ember-file-upload/src/system/rate.ts

@@ -0,0 +1,45 @@
+// Calculate from the last x rate recordings
+const CALCULATE_FROM_LAST = 30;
+
+// Weigh recent rates more highly
+const THRESHOLDS = [
+  { threshold: 10, proportion: 3 },
+  { threshold: 20, proportion: 2 },
+  { threshold: 30, proportion: 1 },
+];
+const DEFAULT_PROPORTION = 1;
+
+export function estimatedRate(allRates: number[]): number {
+  if (!allRates.length) return 0;
+
+  const rates = allRates.slice(CALCULATE_FROM_LAST * -1).reverse();
+  const weights = generateWeights(rates.length);
+
+  // Multiply each rate by its respective weight for a weighted average
+  return rates.reduce((acc, rate, index) => {
+    const weight = weights[index] as number;
+    return acc + rate * weight;
+  }, 0);
+}
+
+export function generateWeights(totalRates: number): number[] {
+  // Generate an array the same length as totalRates filled with proportioanl weights
+  const proportions = Array.from({ length: totalRates }).map((_, index) => {
+    return proportionForPosition(index + 1);
+  });
+
+  const proportionTotal = proportions.reduce((acc, value) => acc + value, 0);
+  // Convert proportional weights to real weights by division
+  const realWeights = proportions.map(
+    (proportion) => proportion / proportionTotal,
+  );
+
+  return realWeights;
+}
+
+export function proportionForPosition(position: number) {
+  for (const { threshold, proportion } of THRESHOLDS) {
+    if (position <= threshold) return proportion;
+  }
+  return DEFAULT_PROPORTION;
+}

ember-file-upload/src/system/upload.ts

@@ -52,6 +52,28 @@ function normalizeOptions(
   return options;
 }
 
+function updateRate(file: UploadFile) {
+  const updatedTime = new Date().getTime();
+
+  // If there's a previous recording, we can calculate a rate from that
+  if (file.timestampWhenProgressLastUpdated) {
+    const timeElapsedSinceLastUpdate =
+      updatedTime - file.timestampWhenProgressLastUpdated;
+
+    const bytesTransferredSinceLastUpdate =
+      file.loaded - file.bytesWhenProgressLastUpdated;
+
+    // Divide by elapsed time to get bytes per millisecond
+    const rate = bytesTransferredSinceLastUpdate / timeElapsedSinceLastUpdate;
+
+    file.rates = [...file.rates, rate];
+  }
+
+  // Finally set current state to be picked up by next invocation
+  file.bytesWhenProgressLastUpdated = file.loaded;
+  file.timestampWhenProgressLastUpdated = updatedTime;
+}
+
 export function onloadstart(
   file: UploadFile,
   event?: ProgressEvent<EventTarget>,
@@ -65,6 +87,8 @@ export function onloadstart(
   // The correct should be returned while progress
   file.size = Math.max(file.size, event.total);
   file.progress = (file.loaded / file.size) * 100;
+
+  updateRate(file);
 }
 
 export function onprogress(
@@ -88,6 +112,8 @@ export function onprogress(
   }
   file.loaded = Math.max(loaded, file.loaded);
   file.progress = (file.loaded / file.size) * 100;
+
+  updateRate(file);
 }
 
 export function onloadend(

ember-file-upload/src/upload-file.ts

@@ -8,6 +8,7 @@ import type { Queue } from './queue.ts';
 import { guidFor } from '@ember/object/internals';
 import RSVP from 'rsvp';
 import { FileSource, FileState, type UploadOptions } from './interfaces.ts';
+import { estimatedRate } from './system/rate.ts';
 
 /**
  * Files provide a uniform interface for interacting
@@ -51,6 +52,11 @@ export class UploadFile {
     this.#name = value;
   }
 
+  /** The current speed in ms that it takes to upload one byte */
+  get rate() {
+    return estimatedRate(this.rates);
+  }
+
   #size = 0;
 
   /** The size of the file in bytes. */
@@ -79,6 +85,11 @@ export class UploadFile {
     return this.type.split('/').slice(-1)[0] ?? '';
   }
 
+  /**
+   * Tracks the number of bytes that had been uploaded when progress values last changed.
+   */
+  bytesWhenProgressLastUpdated = 0;
+
   /** The number of bytes that have been uploaded to the server */
   @tracked loaded = 0;
 
@@ -138,6 +149,14 @@ export class UploadFile {
   //  */
   // source?: FileSource;
 
+  /**
+   * The timestamp of when the progress last updated in milliseconds. Used to calculate the time
+   * that has elapsed.
+   */
+  timestampWhenProgressLastUpdated = 0;
+
+  @tracked rates: number[] = [];
+
   /**
    * Upload file with `application/octet-stream` content type.
    *

test-app/tests/integration/progress-test.ts

@@ -3,7 +3,10 @@ import { setupRenderingTest } from 'ember-qunit';
 import { render } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import { selectFiles } from 'ember-file-upload/test-support';
-import { type MirageTestContext, setupMirage } from 'ember-cli-mirage/test-support';
+import {
+  type MirageTestContext,
+  setupMirage,
+} from 'ember-cli-mirage/test-support';
 import { TrackedArray } from 'tracked-built-ins';
 import { type Asset } from 'test-app/components/demo-upload';
 import type Owner from '@ember/owner';

test-app/tests/unit/system/rate-test.ts

@@ -0,0 +1,77 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+import {
+  estimatedRate,
+  generateWeights,
+  proportionForPosition,
+} from 'ember-file-upload/internal';
+
+module('Unit | rate', function (hooks) {
+  setupTest(hooks);
+
+  test('estimatedRate', function (assert) {
+    assert.strictEqual(
+      estimatedRate([80, 80, 80, 80, 80, 80, 80, 80, 80, 80]),
+      80,
+      'straight average up to first threshold',
+    );
+    assert.strictEqual(
+      estimatedRate([
+        80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 50, 50, 50, 50, 50, 50, 50, 50,
+        50, 50,
+      ]),
+      62.00000000000003,
+      'slowing down, recent values have more affect',
+    );
+    assert.strictEqual(
+      estimatedRate([
+        50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 80, 80, 80, 80, 80, 80, 80, 80,
+        80, 80,
+      ]),
+      68,
+      'speeding up, recent values have more affect',
+    );
+  });
+
+  test('generateWeights', function (assert) {
+    assert.deepEqual(generateWeights(1), [1], 'single weight is 1');
+    assert.deepEqual(
+      generateWeights(10),
+      [0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1],
+      'first 10 weights evenly divided',
+    );
+
+    assert.deepEqual(
+      generateWeights(20),
+      [
+        0.06, 0.06, 0.06, 0.06, 0.06, 0.06, 0.06, 0.06, 0.06, 0.06, 0.04, 0.04,
+        0.04, 0.04, 0.04, 0.04, 0.04, 0.04, 0.04, 0.04,
+      ],
+      'proportionally even weights in each threshold',
+    );
+
+    assert.deepEqual(
+      generateWeights(30),
+      [
+        0.05, 0.05, 0.05, 0.05, 0.05, 0.05, 0.05, 0.05, 0.05, 0.05,
+        0.03333333333333333, 0.03333333333333333, 0.03333333333333333,
+        0.03333333333333333, 0.03333333333333333, 0.03333333333333333,
+        0.03333333333333333, 0.03333333333333333, 0.03333333333333333,
+        0.03333333333333333, 0.016666666666666666, 0.016666666666666666,
+        0.016666666666666666, 0.016666666666666666, 0.016666666666666666,
+        0.016666666666666666, 0.016666666666666666, 0.016666666666666666,
+        0.016666666666666666, 0.016666666666666666,
+      ],
+      'proportionally even weights in each threshold',
+    );
+  });
+
+  test('proportionForPosition', function (assert) {
+    assert.strictEqual(proportionForPosition(1), 3, 'rate 1 high proportion');
+    assert.strictEqual(proportionForPosition(10), 3, 'rate 10 high proportion');
+    assert.strictEqual(proportionForPosition(11), 2, 'rate 11 med proportion');
+    assert.strictEqual(proportionForPosition(20), 2, 'rate 20 med proportion');
+    assert.strictEqual(proportionForPosition(21), 1, 'rate 21 low proportion');
+    assert.strictEqual(proportionForPosition(30), 1, 'rate 30 low proportion');
+  });
+});

test-app/tests/unit/upload-file-test.ts

@@ -3,7 +3,10 @@ import { setupTest } from 'ember-qunit';
 import { uploadHandler } from 'ember-file-upload';
 import { UploadFile, FileSource } from 'ember-file-upload';
 
-import { type MirageTestContext, setupMirage } from 'ember-cli-mirage/test-support';
+import {
+  type MirageTestContext,
+  setupMirage,
+} from 'ember-cli-mirage/test-support';
 
 module('Unit | UploadFile', function (hooks) {
   setupTest(hooks);