From 73022fd11d01d6b26b8b5dd9f7f518ee90bdb16b Mon Sep 17 00:00:00 2001
From: "ITHQ1947\\saritha.pillai" <saritha.pillai@zcocorporation.com>
Date: Tue, 26 Nov 2024 14:33:45 +0530
Subject: [PATCH] #862 fix

---
 .../Researcher/ActivityList/ActivityMethods.ts    |  1 +
 src/components/shared/CustomFileWidget.tsx        | 15 ++++++++++++++-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/components/Researcher/ActivityList/ActivityMethods.ts b/src/components/Researcher/ActivityList/ActivityMethods.ts
index 64b3cce0..2cfc31e4 100644
--- a/src/components/Researcher/ActivityList/ActivityMethods.ts
+++ b/src/components/Researcher/ActivityList/ActivityMethods.ts
@@ -1033,6 +1033,7 @@ export const SchemaList = () => {
                 "ui:widget": "file",
                 "ui:options": {
                   accept: ".gif,.jpg,.png,.svg",
+                  maxSize: 4000,
                 },
               },
               emotionText: {
diff --git a/src/components/shared/CustomFileWidget.tsx b/src/components/shared/CustomFileWidget.tsx
index 31a6df35..199e6b85 100644
--- a/src/components/shared/CustomFileWidget.tsx
+++ b/src/components/shared/CustomFileWidget.tsx
@@ -34,6 +34,7 @@ const useStyles = makeStyles((theme) => ({
   },
   imgBox: { padding: "20px 0 0 0" },
   closeIcon: { color: "red", cursor: "pointer" },
+  errorText: { color: "red" },
 }))
 
 function processFile(files) {
@@ -50,6 +51,7 @@ export default function CustomFileWidget(props) {
   const classes = useStyles()
   const ref = React.useRef(props.value)
   const { t } = useTranslation()
+  const [error, setError] = React.useState("")
 
   const onClick = () => {
     ref.current.value = ""
@@ -76,9 +78,20 @@ export default function CustomFileWidget(props) {
         name="file"
         style={{ display: "none" }}
         onChange={(event) => {
-          processFile(event.target.files).then(props.onChange)
+          if (event.target.files[0].size / 1024 > props.options.maxSize) {
+            setError("Maximum file size should be 4MB")
+            ref.current.value = ""
+            props.onChange("")
+          } else {
+            setError("")
+            processFile(event.target.files).then(props.onChange)
+          }
         }}
       />
+      <span className={classes.errorText}>
+        <br />
+        {error}
+      </span>
       {props?.value && (
         <Box className={classes.imgBox}>
           <Box className={classes.imgInnerBox}>