From 406b323e8e68051d272485544b5f58a0cc166e89 Mon Sep 17 00:00:00 2001
From: Dakshesh Jain <65905942+dakshesh14@users.noreply.github.com>
Date: Mon, 31 Jul 2023 14:17:51 +0530
Subject: [PATCH] fix: image upload accepting non-image format (#1720)

* fix: image upload accepting non-image format

* style: showing all the valid for image upload
---
 .../components/core/image-picker-popover.tsx  | 21 ++++++++++++++++---
 .../core/modals/image-upload-modal.tsx        | 18 ++++++++++++++--
 .../app/components/rich-text-editor/index.tsx |  4 ++--
 3 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/apps/app/components/core/image-picker-popover.tsx b/apps/app/components/core/image-picker-popover.tsx
index e091459b7..7144bd01f 100644
--- a/apps/app/components/core/image-picker-popover.tsx
+++ b/apps/app/components/core/image-picker-popover.tsx
@@ -67,8 +67,12 @@ export const ImagePickerPopover: React.FC<Props> = ({ label, value, onChange })
     setImage(acceptedFiles[0]);
   }, []);
 
-  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+  const { getRootProps, getInputProps, isDragActive, fileRejections } = useDropzone({
     onDrop,
+    accept: {
+      "image/*": [".png", ".jpg", ".jpeg", ".svg", ".webp"],
+    },
+    maxSize: 5 * 1024 * 1024,
   });
 
   const handleSubmit = async () => {
@@ -185,7 +189,7 @@ export const ImagePickerPopover: React.FC<Props> = ({ label, value, onChange })
                   )}
                 </Tab.Panel>
                 <Tab.Panel className="h-full w-full pt-5">
-                  <div className="w-full h-full flex flex-col gap-y-5 sm:gap-y-5">
+                  <div className="w-full h-full flex flex-col gap-y-2">
                     <div className="flex items-center gap-3 w-full flex-1">
                       <div
                         {...getRootProps()}
@@ -224,8 +228,19 @@ export const ImagePickerPopover: React.FC<Props> = ({ label, value, onChange })
                         <input {...getInputProps()} type="text" />
                       </div>
                     </div>
+                    {fileRejections.length > 0 && (
+                      <p className="text-sm text-red-500">
+                        {fileRejections[0].errors[0].code === "file-too-large"
+                          ? "The image size cannot exceed 5 MB."
+                          : "Please upload a file in a valid format."}
+                      </p>
+                    )}
 
-                    <div className="sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:gap-3">
+                    <p className="text-custom-text-200 text-sm">
+                      File formats supported- .jpeg, .jpg, .png, .webp, .svg
+                    </p>
+
+                    <div className="flex items-center justify-end gap-2">
                       <SecondaryButton
                         className="w-full"
                         onClick={() => {
diff --git a/apps/app/components/core/modals/image-upload-modal.tsx b/apps/app/components/core/modals/image-upload-modal.tsx
index 2564f3732..113c5f98d 100644
--- a/apps/app/components/core/modals/image-upload-modal.tsx
+++ b/apps/app/components/core/modals/image-upload-modal.tsx
@@ -43,8 +43,12 @@ export const ImageUploadModal: React.FC<Props> = ({
     setImage(acceptedFiles[0]);
   }, []);
 
-  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+  const { getRootProps, getInputProps, isDragActive, fileRejections } = useDropzone({
     onDrop,
+    accept: {
+      "image/*": [".png", ".jpg", ".jpeg", ".svg", ".webp"],
+    },
+    maxSize: 5 * 1024 * 1024,
   });
 
   const handleSubmit = async () => {
@@ -166,9 +170,19 @@ export const ImageUploadModal: React.FC<Props> = ({
                         <input {...getInputProps()} type="text" />
                       </div>
                     </div>
+                    {fileRejections.length > 0 && (
+                      <p className="text-sm text-red-500">
+                        {fileRejections[0].errors[0].code === "file-too-large"
+                          ? "The image size cannot exceed 5 MB."
+                          : "Please upload a file in a valid format."}
+                      </p>
+                    )}
                   </div>
                 </div>
-                <div className="mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:gap-3">
+                <p className="my-4 text-custom-text-200 text-sm">
+                  File formats supported- .jpeg, .jpg, .png, .webp, .svg
+                </p>
+                <div className="flex items-center justify-end gap-2">
                   <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
                   <PrimaryButton
                     onClick={handleSubmit}
diff --git a/apps/app/components/rich-text-editor/index.tsx b/apps/app/components/rich-text-editor/index.tsx
index f2eef2a48..1a657b6e4 100644
--- a/apps/app/components/rich-text-editor/index.tsx
+++ b/apps/app/components/rich-text-editor/index.tsx
@@ -105,7 +105,7 @@ const RemirrorRichTextEditor: React.FC<IRemirrorRichTextEditor> = (props) => {
               align: "left",
               alt: "Not Found",
               height: "100%",
-              width: "100%",
+              width: "35%",
               src: imageUrl,
             });
           }),
@@ -146,7 +146,7 @@ const RemirrorRichTextEditor: React.FC<IRemirrorRichTextEditor> = (props) => {
         createPlaceholder() {
           const div = document.createElement("div");
           div.className =
-            "w-full aspect-video bg-custom-background-80 text-custom-text-200 animate-pulse";
+            "w-[35%] aspect-video bg-custom-background-80 text-custom-text-200 animate-pulse";
           return div;
         },
       }),