Adjustable upload speed and queue metrics on demo page (#1022)

Add three enhancements to the demo page on the docs website.

Consistent progress event handling
This internal change uses the onloadstart, onprogress, and onloadend internal functions to apply state changes to uploaded files. This should make the file state (and all state derived from this) more consistent with a live upload.

For context – the demo page does not perform a real upload or use Mirage.

Upload speed selection
Users can now adjust upload speed as the queue is processing. This even allows pausing uploads with the Disconnected option. Note there is no simulation upload "abort" or upload failure.

Queue state display
Fairly self-explanatory.

website/app/components/demo-upload.hbs

@@ -1,22 +1,63 @@
-{{#let (file-queue name='demo' onFileAdded=this.addToQueue) as |queue|}}
+<form aria-label="Simulate upload speed">
+  <label>
+    Simulate upload speed:
+    <select name="uploadRate" {{on "change" this.setUploadRate}}>
+      {{#each-in this.UPLOAD_RATES as |name rate|}}
+        <option value={{rate}} selected={{this.eq this.uploadRate rate}}>
+          {{name}}
+        </option>
+      {{/each-in}}
+    </select>
+  </label>
+</form>
+
+{{#let (file-queue name="demo" onFileAdded=this.addToQueue) as |queue|}}
   <FileDropzone @queue={{queue}} class="demo-upload__dropzone" as |dropzone|>
-    <form>
-    <label>
-      <input type='file' {{queue.selectFile}} />
-    </label>
-  </form>
+    <form aria-label="File upload">
+      <label>
+        <input type="file" {{queue.selectFile}} />
+      </label>
+    </form>
     {{#if dropzone.active}}
       Drop to upload
     {{else if queue.files.length}}
-      Uploading {{queue.files.length}} files. ({{queue.progress}}%)
+      Uploading
+      {{queue.files.length}}
+      files. ({{queue.progress}}%)
     {{else if dropzone.supported}}
       Or drag and drop files here to upload them
     {{/if}}
   </FileDropzone>
+
+  <div>
+    <h3>Queue</h3>
+    <table>
+      <thead>
+        <tr>
+          <th width="33%">
+            Loaded
+          </th>
+          <th width="33%">
+            Size
+          </th>
+          <th width="33%">
+            Progress
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>{{this.localeNumber queue.loaded}} bytes</td>
+          <td>{{this.localeNumber queue.size}} bytes</td>
+          <td>{{queue.progress}}%</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
 {{/let}}
 
 <div>
-  <h3>Uploaded Files</h3>
+  <h3>Files</h3>
   <table>
     <thead>
       <tr>
@@ -41,14 +82,14 @@
       </tr>
     </thead>
     <tbody>
-      {{#each this.uploadedFiles as |file|}}
+      {{#each this.files as |file|}}
         <tr>
           <td>{{file.name}}</td>
           <td>{{file.type}}</td>
-          <td>{{file.size}}</td>
+          <td>{{this.localeNumber file.size}} bytes</td>
           <td>{{file.source}}</td>
           <td>{{file.state}}</td>
-          <td>{{file.progress}}</td>
+          <td>{{this.round file.progress}}</td>
         </tr>
       {{/each}}
     </tbody>

website/app/components/demo-upload.js

@@ -4,27 +4,59 @@ import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 import { task, timeout } from 'ember-concurrency';
 import { FileState } from 'ember-file-upload';
+import { onloadstart, onprogress, onloadend } from 'ember-file-upload/internal';
 
-const uploadDuration = 1_500;
-const steps = 15;
-const stepProgress = 100 / steps;
-const stepInterval = uploadDuration / steps;
+// Values in kilobits per second (kbps)
+const UPLOAD_RATES = {
+  'Disconnected - 0 Mbps': 0,
+  'Very slow - 0.1 Mbps': 100,
+  'Slow 3G - 0.4 Mbps': 400,
+  'Fast 3G - 0.675 Mbps': 675,
+  'ADSL - 1.5 Mbps': 1_500,
+  '4G/LTE - 50 Mbps': 50_000,
+  'Fast Fibre - 100 Mbps': 100_000,
+};
 
-const round = (number) => Math.round(number * 100) / 100;
+const STEP_INTERVAL = 100; // Progress events every 100ms
+const STEPS_PER_SECOND = 1_000 / STEP_INTERVAL;
+const BYTES_PER_KILOBYTE = 1_024;
+const BITS_PER_BYTE = 8;
 
 export default class DemoUploadComponent extends Component {
   @service fileQueue;
-  @tracked uploadedFiles = [];
+
+  @tracked files = [];
+  @tracked uploadRate = UPLOAD_RATES['Fast 3G - 0.675 Mbps'];
+
+  UPLOAD_RATES = UPLOAD_RATES;
 
   get queue() {
     return this.fileQueue.find('demo');
   }
 
+  get bytesPerStep() {
+    const kilobytesPerSecond =
+      // Convert to kilobytes
+      (this.uploadRate / BITS_PER_BYTE) *
+      // and then to bytes
+      BYTES_PER_KILOBYTE;
+    return kilobytesPerSecond / STEPS_PER_SECOND;
+  }
+
+  round = (number) => Math.round(number);
+  localeNumber = (number) => number.toLocaleString('en-GB');
+  eq = (a, b) => a === b;
+
+  @action
+  setUploadRate(event) {
+    this.uploadRate = parseInt(event.target.value, 10);
+  }
+
   @action
   addToQueue(file) {
     file.queue = this.queue;
     file.state = FileState.Queued;
-    this.uploadedFiles = [file, ...this.uploadedFiles];
+    this.files = [file, ...this.files];
 
     this.simulateUpload.perform(file);
   }
@@ -33,14 +65,37 @@ export default class DemoUploadComponent extends Component {
   *simulateUpload(file) {
     file.state = FileState.Uploading;
 
-    const stepLoaded = file.size / steps;
+    onloadstart(
+      file,
+      new ProgressEvent('loadstart', {
+        lengthComputable: true,
+        loaded: 0,
+        total: 0,
+      }),
+    );
 
     while (file.progress < 100) {
-      yield timeout(stepInterval);
-      file.loaded = file.loaded += stepLoaded;
-      file.progress = round(Math.min(file.progress + stepProgress, 100));
+      yield timeout(STEP_INTERVAL);
+
+      onprogress(
+        file,
+        new ProgressEvent('progress', {
+          lengthComputable: true,
+          loaded: file.loaded + this.bytesPerStep,
+          total: file.size,
+        }),
+      );
     }
 
+    onloadend(
+      file,
+      new ProgressEvent('loadend', {
+        lengthComputable: true,
+        loaded: file.size,
+        total: file.size,
+      }),
+    );
+
     file.state = FileState.Uploaded;
     file.queue.flush();
   }

website/app/templates/demo.hbs

@@ -1,5 +1,7 @@
+{{page-title "Demo"}}
+
 <header>
-  <div class='container'>
+  <div class="container">
     <h1>Demo</h1>
 
     <DemoUpload />