From 101994840a57f36c7c2fa307c00f4a32c71dd734 Mon Sep 17 00:00:00 2001
From: Akshita Goyal <36129505+gakshita@users.noreply.github.com>
Date: Fri, 25 Apr 2025 14:30:12 +0530
Subject: [PATCH] [WEB-3944] fix: Error Toast message content update while
 uploading images (#6969)

* fix: handled svg uploads

* chore: proper error message with all allowed types

---------

Co-authored-by: sangeethailango <sangeethailango21@gmail.com>
---
 apiserver/plane/app/views/asset/v2.py         |  6 ++---
 apiserver/plane/space/views/asset.py          |  2 +-
 .../components/core/image-picker-popover.tsx  | 24 ++++++++++++++++---
 3 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/apiserver/plane/app/views/asset/v2.py b/apiserver/plane/app/views/asset/v2.py
index eba3c4e89..46e988be2 100644
--- a/apiserver/plane/app/views/asset/v2.py
+++ b/apiserver/plane/app/views/asset/v2.py
@@ -137,7 +137,7 @@ class UserAssetsV2Endpoint(BaseAPIView):
         if type not in allowed_types:
             return Response(
                 {
-                    "error": "Invalid file type. Only JPEG and PNG files are allowed.",
+                    "error": "Invalid file type. Only JPEG, PNG, WebP, JPG and GIF files are allowed.",
                     "status": False,
                 },
                 status=status.HTTP_400_BAD_REQUEST,
@@ -351,7 +351,7 @@ class WorkspaceFileAssetEndpoint(BaseAPIView):
         if type not in allowed_types:
             return Response(
                 {
-                    "error": "Invalid file type. Only JPEG and PNG files are allowed.",
+                    "error": "Invalid file type. Only JPEG, PNG, WebP, JPG and GIF files are allowed.",
                     "status": False,
                 },
                 status=status.HTTP_400_BAD_REQUEST,
@@ -552,7 +552,7 @@ class ProjectAssetEndpoint(BaseAPIView):
         if type not in allowed_types:
             return Response(
                 {
-                    "error": "Invalid file type. Only JPEG and PNG files are allowed.",
+                    "error": "Invalid file type. Only JPEG, PNG, WebP, JPG and GIF files are allowed.",
                     "status": False,
                 },
                 status=status.HTTP_400_BAD_REQUEST,
diff --git a/apiserver/plane/space/views/asset.py b/apiserver/plane/space/views/asset.py
index 3e1d4d6f7..d2537671f 100644
--- a/apiserver/plane/space/views/asset.py
+++ b/apiserver/plane/space/views/asset.py
@@ -96,7 +96,7 @@ class EntityAssetEndpoint(BaseAPIView):
         if type not in allowed_types:
             return Response(
                 {
-                    "error": "Invalid file type. Only JPEG and PNG files are allowed.",
+                    "error": "Invalid file type. Only JPEG, PNG, WebP, JPG and GIF files are allowed.",
                     "status": False,
                 },
                 status=status.HTTP_400_BAD_REQUEST,
diff --git a/web/core/components/core/image-picker-popover.tsx b/web/core/components/core/image-picker-popover.tsx
index b208b9f5f..e54805d0f 100644
--- a/web/core/components/core/image-picker-popover.tsx
+++ b/web/core/components/core/image-picker-popover.tsx
@@ -14,7 +14,7 @@ import { useOutsideClickDetector } from "@plane/hooks";
 // plane types
 import { EFileAssetType } from "@plane/types/src/enums";
 // ui
-import { Button, Input, Loader } from "@plane/ui";
+import { Button, Input, Loader, TOAST_TYPE, setToast } from "@plane/ui";
 // helpers
 import { getFileURL } from "@/helpers/file.helper";
 // hooks
@@ -114,7 +114,16 @@ export const ImagePickerPopover: React.FC<Props> = observer((props) => {
           },
           image
         )
-        .then((res) => uploadCallback(res.asset_url));
+        .then((res) => uploadCallback(res.asset_url))
+        .catch((error) => {
+          console.error("Error uploading user cover image:", error);
+          setIsImageUploading(false);
+          setToast({
+            message: error?.error ?? "The image could not be uploaded",
+            type: TOAST_TYPE.ERROR,
+            title: "Image not uploaded",
+          });
+        });
     } else {
       if (!workspaceSlug) return;
       await fileService
@@ -126,7 +135,16 @@ export const ImagePickerPopover: React.FC<Props> = observer((props) => {
           },
           image
         )
-        .then((res) => uploadCallback(res.asset_url));
+        .then((res) => uploadCallback(res.asset_url))
+        .catch((error) => {
+          console.error("Error uploading project cover image:", error);
+          setIsImageUploading(false);
+          setToast({
+            message: error?.error ?? "The image could not be uploaded",
+            type: TOAST_TYPE.ERROR,
+            title: "Image not uploaded",
+          });
+        });
     }
   };