Merge pull request #842 from BIDMCDigitalPsychiatry/portal-update

#862 fix
BIDMCDigitalPsychiatry · Nov 26, 2024 · 615fe9f · 615fe9f
2 parents eb8ad07 + 73022fd
commit 615fe9f
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git 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
@@ -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}>