From 6eb0b5ddb0513d529723977b46963802dbc4a1c8 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Fri, 23 May 2025 15:33:56 +0530
Subject: [PATCH] [WEB-4137] chore: restrict SVG file selection (#7095)

* chore: update accepted file mime types

* chore: update accepted file mime types
---
 packages/constants/src/file.ts                      | 13 +++++++++++++
 web/core/components/core/image-picker-popover.tsx   |  6 ++----
 .../core/modals/user-image-upload-modal.tsx         |  6 ++----
 .../core/modals/workspace-image-upload-modal.tsx    |  6 ++----
 4 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/packages/constants/src/file.ts b/packages/constants/src/file.ts
index 3fac821fa..9de3b0356 100644
--- a/packages/constants/src/file.ts
+++ b/packages/constants/src/file.ts
@@ -1 +1,14 @@
 export const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
+
+export const ACCEPTED_AVATAR_IMAGE_MIME_TYPES_FOR_REACT_DROPZONE = {
+  "image/jpeg": [],
+  "image/jpg": [],
+  "image/png": [],
+  "image/webp": [],
+};
+export const ACCEPTED_COVER_IMAGE_MIME_TYPES_FOR_REACT_DROPZONE = {
+  "image/jpeg": [],
+  "image/jpg": [],
+  "image/png": [],
+  "image/webp": [],
+};
diff --git a/web/core/components/core/image-picker-popover.tsx b/web/core/components/core/image-picker-popover.tsx
index e54805d0f..bade076d9 100644
--- a/web/core/components/core/image-picker-popover.tsx
+++ b/web/core/components/core/image-picker-popover.tsx
@@ -9,7 +9,7 @@ import { Control, Controller } from "react-hook-form";
 import useSWR from "swr";
 import { Tab, Popover } from "@headlessui/react";
 // plane imports
-import { MAX_FILE_SIZE } from "@plane/constants";
+import { ACCEPTED_COVER_IMAGE_MIME_TYPES_FOR_REACT_DROPZONE, MAX_FILE_SIZE } from "@plane/constants";
 import { useOutsideClickDetector } from "@plane/hooks";
 // plane types
 import { EFileAssetType } from "@plane/types/src/enums";
@@ -88,9 +88,7 @@ export const ImagePickerPopover: React.FC<Props> = observer((props) => {
 
   const { getRootProps, getInputProps, isDragActive, fileRejections } = useDropzone({
     onDrop,
-    accept: {
-      "image/*": [".png", ".jpg", ".jpeg", ".webp"],
-    },
+    accept: ACCEPTED_COVER_IMAGE_MIME_TYPES_FOR_REACT_DROPZONE,
     maxSize: MAX_FILE_SIZE,
   });
 
diff --git a/web/core/components/core/modals/user-image-upload-modal.tsx b/web/core/components/core/modals/user-image-upload-modal.tsx
index 286f36415..c768ff265 100644
--- a/web/core/components/core/modals/user-image-upload-modal.tsx
+++ b/web/core/components/core/modals/user-image-upload-modal.tsx
@@ -6,7 +6,7 @@ import { useDropzone } from "react-dropzone";
 import { UserCircle2 } from "lucide-react";
 import { Transition, Dialog } from "@headlessui/react";
 // plane imports
-import { MAX_FILE_SIZE } from "@plane/constants";
+import { ACCEPTED_AVATAR_IMAGE_MIME_TYPES_FOR_REACT_DROPZONE, MAX_FILE_SIZE } from "@plane/constants";
 import { EFileAssetType } from "@plane/types/src/enums";
 import { Button, TOAST_TYPE, setToast } from "@plane/ui";
 // helpers
@@ -35,9 +35,7 @@ export const UserImageUploadModal: React.FC<Props> = observer((props) => {
 
   const { getRootProps, getInputProps, isDragActive, fileRejections } = useDropzone({
     onDrop,
-    accept: {
-      "image/*": [".png", ".jpg", ".jpeg", ".webp"],
-    },
+    accept: ACCEPTED_AVATAR_IMAGE_MIME_TYPES_FOR_REACT_DROPZONE,
     maxSize: MAX_FILE_SIZE,
     multiple: false,
   });
diff --git a/web/core/components/core/modals/workspace-image-upload-modal.tsx b/web/core/components/core/modals/workspace-image-upload-modal.tsx
index df0248c84..6b4bf3609 100644
--- a/web/core/components/core/modals/workspace-image-upload-modal.tsx
+++ b/web/core/components/core/modals/workspace-image-upload-modal.tsx
@@ -6,7 +6,7 @@ import { useDropzone } from "react-dropzone";
 import { UserCircle2 } from "lucide-react";
 import { Transition, Dialog } from "@headlessui/react";
 // plane imports
-import { MAX_FILE_SIZE } from "@plane/constants";
+import { ACCEPTED_AVATAR_IMAGE_MIME_TYPES_FOR_REACT_DROPZONE, MAX_FILE_SIZE } from "@plane/constants";
 import { EFileAssetType } from "@plane/types/src/enums";
 import { Button } from "@plane/ui";
 // helpers
@@ -43,9 +43,7 @@ export const WorkspaceImageUploadModal: React.FC<Props> = observer((props) => {
 
   const { getRootProps, getInputProps, isDragActive, fileRejections } = useDropzone({
     onDrop,
-    accept: {
-      "image/*": [".png", ".jpg", ".jpeg", ".webp"],
-    },
+    accept: ACCEPTED_AVATAR_IMAGE_MIME_TYPES_FOR_REACT_DROPZONE,
     maxSize: MAX_FILE_SIZE,
     multiple: false,
   });