Error messages should clearly specify the exact issue encountered during facility cover image uploads

src/components/Facility/FacilityHome.tsx

@@ -4,6 +4,7 @@ import { Hospital, MapPin, MoreVertical, Settings, Trash2 } from "lucide-react";
 import { navigate } from "raviger";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
 
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -145,10 +146,17 @@ export const FacilityHome = ({ facilityId }: Props) => {
         if (xhr.status === 200) {
           await sleep(1000);
           facilityFetch();
-          Notification.Success({ msg: "Cover image updated." });
+          toast.success("Cover image updated.");
           setEditCoverImage(false);
         } else {
-          onError();
+          const response = JSON.parse(xhr.responseText);
+          response.errors.forEach((error: any) => {
+            if (error?.msg?.cover_image) {
+              error.msg.cover_image.forEach((errorMsg: string) => {
+                toast.error(errorMsg);
+              });
+            }
+          });
         }
       },
       null,