From a8b01dc21a637b389a7a4274c4d74a465b8ab899 Mon Sep 17 00:00:00 2001
From: Russell Tan <sell_nat@yahoo.com>
Date: Thu, 10 Aug 2023 06:38:29 -0700
Subject: [PATCH] fix(web): show warning if upload completed with errors
 (#3634)

---
 .../shared-components/upload-panel.svelte        | 16 ++++++++++++++--
 web/src/lib/stores/upload.ts                     |  2 ++
 web/src/lib/utils/file-uploader.ts               |  2 ++
 3 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/web/src/lib/components/shared-components/upload-panel.svelte b/web/src/lib/components/shared-components/upload-panel.svelte
index 41cb4b3341..e2e46265d2 100644
--- a/web/src/lib/components/shared-components/upload-panel.svelte
+++ b/web/src/lib/components/shared-components/upload-panel.svelte
@@ -10,6 +10,7 @@
   let showDetail = true;
   let uploadLength = 0;
   let duplicateCount = 0;
+  let errorCount = 0;
   let isUploading = false;
 
   // Reactive action to update asset uploadLength whenever there is a new one added to the list
@@ -26,6 +27,10 @@
   uploadAssetsStore.duplicateCounter.subscribe((value) => {
     duplicateCount = value;
   });
+
+  uploadAssetsStore.errorCounter.subscribe((value) => {
+    errorCount = value;
+  });
 </script>
 
 {#if isUploading}
@@ -33,10 +38,17 @@
     in:fade={{ duration: 250 }}
     out:fade={{ duration: 250, delay: 1000 }}
     on:outroend={() => {
+      const errorInfo =
+        errorCount > 0 ? `Upload completed with ${errorCount} error${errorCount > 1 ? 's' : ''}` : 'Upload success';
+      const type = errorCount > 0 ? NotificationType.Warning : NotificationType.Info;
+
       notificationController.show({
-        message: 'Upload success, refresh the page to see new upload assets',
-        type: NotificationType.Info,
+        message: `${errorInfo}, refresh the page to see new upload assets`,
+        type,
       });
+
+      uploadAssetsStore.errorCounter.set(0);
+
       if (duplicateCount > 0) {
         notificationController.show({
           message: `Skipped ${duplicateCount} duplicate picture${duplicateCount > 1 ? 's' : ''}`,
diff --git a/web/src/lib/stores/upload.ts b/web/src/lib/stores/upload.ts
index c6da3bcffe..1efa0be024 100644
--- a/web/src/lib/stores/upload.ts
+++ b/web/src/lib/stores/upload.ts
@@ -4,6 +4,7 @@ import type { UploadAsset } from '../models/upload-asset';
 function createUploadStore() {
   const uploadAssets = writable<Array<UploadAsset>>([]);
   const duplicateCounter = writable(0);
+  const errorCounter = writable(0);
 
   const { subscribe } = uploadAssets;
 
@@ -36,6 +37,7 @@ function createUploadStore() {
 
   return {
     subscribe,
+    errorCounter,
     duplicateCounter,
     isUploading,
     addNewUploadAsset,
diff --git a/web/src/lib/utils/file-uploader.ts b/web/src/lib/utils/file-uploader.ts
index 7238310736..fad841c221 100644
--- a/web/src/lib/utils/file-uploader.ts
+++ b/web/src/lib/utils/file-uploader.ts
@@ -173,6 +173,8 @@ async function fileUploader(
 }
 
 function handleUploadError(asset: File, respBody = '{}', extraMessage?: string) {
+  uploadAssetsStore.errorCounter.update((count) => count + 1);
+
   try {
     const res = JSON.parse(respBody);