fix: Show validation error message on facility cover image upload (#8625)

src/Components/Facility/CoverImageEditModal.tsx

@@ -13,7 +13,6 @@ import Webcam from "react-webcam";
 import { FacilityModel } from "./models";
 import useWindowDimensions from "../../Common/hooks/useWindowDimensions";
 import CareIcon from "../../CAREUI/icons/CareIcon";
-import * as Notification from "../../Utils/Notifications.js";
 import { useTranslation } from "react-i18next";
 import { LocalStorageKeys } from "../../Common/constants";
 import DialogModal from "../Common/Dialog";
@@ -130,25 +129,17 @@ const CoverImageEditModal = ({
           "Bearer " + localStorage.getItem(LocalStorageKeys.accessToken),
       },
       async (xhr: XMLHttpRequest) => {
+        setIsProcessing(false);
         if (xhr.status === 200) {
           Success({ msg: "Cover image updated." });
-          setIsProcessing(false);
           setIsCaptureImgBeingUploaded(false);
           await sleep(1000);
           onSave?.();
           closeModal();
-        } else {
-          Notification.Error({
-            msg: "Something went wrong!",
-          });
-          setIsProcessing(false);
         }
       },
       null,
       () => {
-        Notification.Error({
-          msg: "Network Failure. Please check your internet connectivity.",
-        });
         setIsProcessing(false);
       },
     );

src/Utils/request/uploadFile.ts

@@ -1,5 +1,6 @@
 import { Dispatch, SetStateAction } from "react";
 import { handleUploadPercentage } from "./utils";
+import * as Notification from "../../Utils/Notifications.js";
 
 const uploadFile = (
   url: string,
@@ -19,6 +20,16 @@ const uploadFile = (
 
   xhr.onload = () => {
     onLoad(xhr);
+    if (400 <= xhr.status && xhr.status <= 499) {
+      const error = JSON.parse(xhr.responseText);
+      if (typeof error === "object" && !Array.isArray(error)) {
+        Object.values(error).forEach((msg) => {
+          Notification.Error({ msg: msg || "Something went wrong!" });
+        });
+      } else {
+        Notification.Error({ msg: error || "Something went wrong!" });
+      }
+    }
   };
 
   if (setUploadPercent != null) {
@@ -28,6 +39,9 @@ const uploadFile = (
   }
 
   xhr.onerror = () => {
+    Notification.Error({
+      msg: "Network Failure. Please check your internet connectivity.",
+    });
     onError();
   };
   xhr.send(file);