From 1eaf3a4594b404e08e52bebeef3fd3952d40b0bc Mon Sep 17 00:00:00 2001
From: Oliver <oliver.henry.walters@gmail.com>
Date: Wed, 18 Dec 2024 23:24:18 +1100
Subject: [PATCH] Image upload error (#8700)

* Add helper function for displaying API error message

* Provide feedback on image upload

* Update notification
---
 .../src/components/details/DetailsImage.tsx   | 26 +++++++++++++----
 src/frontend/src/functions/notifications.tsx  | 28 +++++++++++++++++++
 .../AdminCenter/CurrencyManagmentPanel.tsx    |  8 +++---
 3 files changed, 52 insertions(+), 10 deletions(-)

diff --git a/src/frontend/src/components/details/DetailsImage.tsx b/src/frontend/src/components/details/DetailsImage.tsx
index 43fae3913a97..09104900e5a4 100644
--- a/src/frontend/src/components/details/DetailsImage.tsx
+++ b/src/frontend/src/components/details/DetailsImage.tsx
@@ -19,10 +19,12 @@ import { useHover } from '@mantine/hooks';
 import { modals } from '@mantine/modals';
 import { useMemo, useState } from 'react';
 
+import { showNotification } from '@mantine/notifications';
 import { api } from '../../App';
 import type { UserRoles } from '../../enums/Roles';
 import { cancelEvent } from '../../functions/events';
 import { InvenTreeIcon } from '../../functions/icons';
+import { showApiErrorMessage } from '../../functions/notifications';
 import { useEditApiFormModal } from '../../hooks/UseForm';
 import { useGlobalSettingsState } from '../../states/SettingsState';
 import { useUserState } from '../../states/UserState';
@@ -159,12 +161,24 @@ function UploadModal({
     const formData = new FormData();
     formData.append('image', file, file.name);
 
-    const response = await api.patch(apiPath, formData);
-
-    if (response.data.image.includes(file.name)) {
-      setImage(response.data.image);
-      modals.closeAll();
-    }
+    api
+      .patch(apiPath, formData)
+      .then((response) => {
+        setImage(response.data.image);
+        modals.closeAll();
+        showNotification({
+          title: t`Image uploaded`,
+          message: t`Image has been uploaded successfully`,
+          color: 'green'
+        });
+      })
+      .catch((error) => {
+        showApiErrorMessage({
+          error: error,
+          title: t`Upload Error`,
+          field: 'image'
+        });
+      });
   };
 
   const { colorScheme } = useMantineColorScheme();
diff --git a/src/frontend/src/functions/notifications.tsx b/src/frontend/src/functions/notifications.tsx
index c0f4c47e9a15..9c5d32424e56 100644
--- a/src/frontend/src/functions/notifications.tsx
+++ b/src/frontend/src/functions/notifications.tsx
@@ -74,3 +74,31 @@ export function showLoginNotification({
     autoClose: 2500
   });
 }
+
+export function showApiErrorMessage({
+  error,
+  title,
+  message,
+  field
+}: {
+  error: any;
+  title: string;
+  message?: string;
+  field?: string;
+}) {
+  // Extract error description from response
+  const error_data: any = error.response?.data ?? {};
+
+  let error_msg: any =
+    message ?? error_data[field ?? 'error'] ?? error_data['non_field_errors'];
+
+  if (!error_msg) {
+    error_msg = t`An error occurred`;
+  }
+
+  notifications.show({
+    title: title,
+    message: error_msg,
+    color: 'red'
+  });
+}
diff --git a/src/frontend/src/pages/Index/Settings/AdminCenter/CurrencyManagmentPanel.tsx b/src/frontend/src/pages/Index/Settings/AdminCenter/CurrencyManagmentPanel.tsx
index 651769739755..57ad0c17fb63 100644
--- a/src/frontend/src/pages/Index/Settings/AdminCenter/CurrencyManagmentPanel.tsx
+++ b/src/frontend/src/pages/Index/Settings/AdminCenter/CurrencyManagmentPanel.tsx
@@ -9,6 +9,7 @@ import { ActionButton } from '../../../../components/buttons/ActionButton';
 import { FactCollection } from '../../../../components/settings/FactCollection';
 import { GlobalSettingList } from '../../../../components/settings/SettingList';
 import { ApiEndpoints } from '../../../../enums/ApiEndpoints';
+import { showApiErrorMessage } from '../../../../functions/notifications';
 import { useTable } from '../../../../hooks/UseTable';
 import { apiUrl } from '../../../../states/ApiState';
 import { InvenTreeTable } from '../../../../tables/InvenTreeTable';
@@ -46,10 +47,9 @@ export function CurrencyTable({
         });
       })
       .catch((error) => {
-        showNotification({
-          title: t`Exchange rate update error`,
-          message: error,
-          color: 'red'
+        showApiErrorMessage({
+          error: error,
+          title: t`Exchange rate update error`
         });
       });
   }, []);