form submission service with upload progress UI/UX

- factored progressResponseJSON out of processResponse
- added submitFormWithProgress
- added `upload` module to package
- added components/upload-progress-dialog.pug

app/views/components/upload-progress-dialog.pug

@@ -0,0 +1,3 @@
+#upload-progress-dialog(hidden).uk-width-large.uk-margin-auto.uk-margin.uk-text-center
+  progress#upload-progress(min=0, max=100, value=0).uk-progress.uk-margin-remove
+  label#upload-progress-prompt.uk-form-label Upload progress

client/js/site-app.js

@@ -414,6 +414,7 @@ export default class DtpSiteApp extends DtpApp {
       UIkit.modal.alert(`Failed to remove image: ${error.message}`);
     }
   }
+
   async submitDialogForm (event, userAction) {
     await this.submitForm(event, userAction);
     await this.closeCurrentDialog();

lib/client/js/dtp-app.js

@@ -4,6 +4,8 @@
 
 'use strict';
 
+import { Upload } from 'upload';
+
 import DtpLog from './dtp-log';
 import DtpSocket from './dtp-socket';
 import DtpDisplayEngine from './dtp-display-engine';
@@ -88,8 +90,45 @@ export default class DtpApp {
     return;
   }
 
+  async submitFormWithProgress (event) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    const formElement = event.currentTarget || event.target;
+    const form = new FormData(formElement);
+
+    const progressDialog = document.querySelector(formElement.getAttribute('data-progress-dialog') || '#upload-progress-dialog');
+    const progressBar = document.querySelector(formElement.getAttribute('data-progress-element') || 'progress#upload-progress');
+    const progressPrompt = document.querySelector(formElement.getAttribute('data-progress-prompt') || '#upload-progress-prompt');
+
+    const upload = new Upload({
+      url: formElement.getAttribute('action'),
+      form,
+    });
+
+    upload.on('progress', (progress) => {
+      this.log.info('submitSemitism', 'upload progress', { progress });
+      progressBar.value = Math.round(progress * 100.0);
+    });
+
+    progressDialog.removeAttribute('hidden');
+    const response = await upload.upload();
+
+    progressPrompt.textContent = 'Upload complete...';
+    this.log.info('submitSemitism', 'upload response', { response });
+
+    const json = JSON.parse(response.data);
+    await this.processResponseJSON(json);
+
+    return true;
+  }
+
   async processResponse (response) {
     const json = await response.json();
+    return this.processResponseJSON(json);
+  }
+
+  async processResponseJSON (json) {
     if (!json.success) {
       this.log.error('processResponse', json.message);
       throw new Error(json.message);

package.json

@@ -81,6 +81,7 @@
     "uikit": "^3.11.1",
     "uniqid": "^5.4.0",
     "unzalgo": "^3.0.0",
+    "upload": "^1.3.1",
     "url-validation": "^2.1.0",
     "uuid": "^8.3.2",
     "zxcvbn": "^4.4.2"

yarn.lock

@@ -8494,6 +8494,13 @@ update-notifier@^5.1.0:
     semver-diff "^3.1.1"
     xdg-basedir "^4.0.0"
 
+upload@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/upload/-/upload-1.3.1.tgz#e82b34677dd2a4d4f943c3f8317930b4c4d0439f"
+  integrity sha512-mDG4/vZRlUFzKScx5LzyIDUDfU3eOOdO+mSfTPKSJr9xGdrsqLf5wuj18ICrahBJJzSwVuGbxZWt3TwynULESg==
+  dependencies:
+    form-data "^4.0.0"
+
 uri-js@^4.2.2:
   version "4.4.1"
   resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"