From 86daa134265294e73881b376c6d3a5e6d917f37b Mon Sep 17 00:00:00 2001
From: Proddy <paul@derbyshire.nl>
Date: Sun, 2 Jul 2023 12:38:05 +0200
Subject: [PATCH] fix for cancel upload

---
 interface/package.json                           |  2 +-
 interface/src/api/endpoints.ts                   |  3 ++-
 .../src/framework/system/UploadFileForm.tsx      | 16 ++++++++--------
 interface/yarn.lock                              | 10 +++++-----
 mock-api/server.js                               |  3 +--
 5 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/interface/package.json b/interface/package.json
index 9941a0d77..1dca171fe 100644
--- a/interface/package.json
+++ b/interface/package.json
@@ -31,7 +31,7 @@
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.6",
     "@types/react-router-dom": "^5.3.3",
-    "alova": "^2.8.1",
+    "alova": "^2.9.0",
     "async-validator": "^4.2.5",
     "history": "^5.3.0",
     "jwt-decode": "^3.1.2",
diff --git a/interface/src/api/endpoints.ts b/interface/src/api/endpoints.ts
index 545bd41af..9cad000d8 100644
--- a/interface/src/api/endpoints.ts
+++ b/interface/src/api/endpoints.ts
@@ -46,7 +46,8 @@ export const alovaInstance = createAlova({
     }
 
     // Interceptor for request failure. This interceptor will be entered when the request is wrong.
-    // TODO how best to handle http errors like 401 (unauthorized) but I think this is handled correctly in AppRouting?
+    // TODO how best to handle http errors like 401 (unauthorized)
+    // but I think this is handled correctly in AppRouting? See AuthenticatedRouting()
     // onError: (error, method) => {
     //   alert(error.message);
     // }
diff --git a/interface/src/framework/system/UploadFileForm.tsx b/interface/src/framework/system/UploadFileForm.tsx
index 2bc98b2e5..4414be0fb 100644
--- a/interface/src/framework/system/UploadFileForm.tsx
+++ b/interface/src/framework/system/UploadFileForm.tsx
@@ -34,7 +34,7 @@ const UploadFileForm: FC = () => {
     uploading: progress,
     send: sendUpload,
     onSuccess: onSuccessUpload,
-    abort
+    abort: cancelUpload
   } = useRequest(SystemApi.uploadFile, {
     immediate: false,
     force: true
@@ -49,14 +49,14 @@ const UploadFileForm: FC = () => {
     }
   });
 
-  const cancelUpload = () => {
-    console.log('aborting upload...'); // TODO remove debug
-    abort();
-    toast.warning(LL.UPLOAD() + ' ' + LL.ABORTED());
-  };
-
   const startUpload = async (files: File[]) => {
-    await sendUpload(files[0]);
+    await sendUpload(files[0]).catch((err) => {
+      if (err.message === 'The user aborted a request') {
+        toast.warning(LL.UPLOAD() + ' ' + LL.ABORTED());
+      } else {
+        toast.warning(err.message);
+      }
+    });
   };
 
   const saveFile = (json: any, endpoint: string) => {
diff --git a/interface/yarn.lock b/interface/yarn.lock
index e5db77c63..59f4b6d0c 100644
--- a/interface/yarn.lock
+++ b/interface/yarn.lock
@@ -1525,7 +1525,7 @@ __metadata:
     "@typescript-eslint/eslint-plugin": ^5.60.1
     "@typescript-eslint/parser": ^5.60.1
     "@vitejs/plugin-react-swc": ^3.3.2
-    alova: ^2.8.1
+    alova: ^2.9.0
     async-validator: ^4.2.5
     eslint: ^8.44.0
     eslint-config-airbnb: ^19.0.4
@@ -1629,10 +1629,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"alova@npm:^2.8.1":
-  version: 2.8.1
-  resolution: "alova@npm:2.8.1"
-  checksum: 28b6ce7f45ac1d9a38b35e92db7886c3ba899cc54109f239dc590f38da9cb0ccbc650c0455b7e3f08bbd0d714e3e4fa19648342536ceae0cd8f4898f1d9f9b64
+"alova@npm:^2.9.0":
+  version: 2.9.0
+  resolution: "alova@npm:2.9.0"
+  checksum: 397317cbc222cf732b03dc667b7540ccd1be7013d3b4940bc9e9b11657ffbbdf297a056df4203042a8554b4f9deab3e9e6d6af2e6012b69c07b63b65734d2a7e
   languageName: node
   linkType: hard
 
diff --git a/mock-api/server.js b/mock-api/server.js
index 87c504f78..cd56b2115 100644
--- a/mock-api/server.js
+++ b/mock-api/server.js
@@ -24,7 +24,7 @@ function progress_middleware(req, res, next) {
     const percentage = (progress / file_size) * 100;
     console.log(`Progress: ${Math.round(percentage)}%`);
     // await delay(1000); // slow it down
-    delay_blocking(100); // slow it down
+    delay_blocking(200); // slow it down
   });
   next(); // invoke next middleware which is multer
 }
@@ -2058,7 +2058,6 @@ rest_server.get(LIST_NETWORKS_ENDPOINT, (req, res) => {
     res.sendStatus(200); // waiting....
   }
 });
-// TODO should be a post as its a command?
 rest_server.get(SCAN_NETWORKS_ENDPOINT, (req, res) => {
   console.log('start scan networks');
   countWifiScanPoll = 0; // stop the poll