From 2973db8e7ad1984322317640209c097e4e0c1b14 Mon Sep 17 00:00:00 2001
From: rob <rob@digitaltelepresence.com>
Date: Thu, 29 Sep 2022 15:44:57 -0400
Subject: [PATCH] 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
---
 .../components/upload-progress-dialog.pug     |  3 ++
 client/js/site-app.js                         |  1 +
 lib/client/js/dtp-app.js                      | 39 +++++++++++++++++++
 package.json                                  |  1 +
 yarn.lock                                     |  7 ++++
 5 files changed, 51 insertions(+)
 create mode 100644 app/views/components/upload-progress-dialog.pug

diff --git a/app/views/components/upload-progress-dialog.pug b/app/views/components/upload-progress-dialog.pug
new file mode 100644
index 0000000..ebd1dee
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/client/js/site-app.js b/client/js/site-app.js
index 506c688..b4711ac 100644
--- a/client/js/site-app.js
+++ b/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();
diff --git a/lib/client/js/dtp-app.js b/lib/client/js/dtp-app.js
index 9e625ed..6689f6b 100644
--- a/lib/client/js/dtp-app.js
+++ b/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);
diff --git a/package.json b/package.json
index dd51862..8f0d884 100644
--- a/package.json
+++ b/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"
diff --git a/yarn.lock b/yarn.lock
index 654b517..0aee8b2 100644
--- a/yarn.lock
+++ b/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"