#347 #454 Centralized logo limitation values and fixed upload print logo issues

src/main/www/src/Constants/Constants.js

@@ -292,6 +292,10 @@ export const CONFIG_FOR_BAR_LINE_CHART = {
   aspectRatio: 1.8,
 };
 
+export const LOGO_DIMENSIONS_LIMITATION = 2000; // pixels
+export const LOGO_SIZE_LIMITATION_WEB = 1048576; // bytes = 1MB
+export const LOGO_SIZE_LIMITATION_PRINT = 10485760; // bytes = 10MB
+
 // Constants for styles
 export const drawerWidth = 280;
 export const themeBlack = '#0B0B0B';

src/main/www/src/Utils/formFunctionHelpers.js

@@ -760,7 +760,7 @@ export const fetchWrapper = (url, method, callbackFunc, dataBody, errCallbackFun
     .catch((err) => {
       console.log(err);
       if (errCallbackFunc) {
-        errCallbackFunc();
+        errCallbackFunc(err);
         return;
       }
     });

src/main/www/src/components/Portal/OrgProfile/OrgProfilesBasicInfo.tsx

@@ -12,6 +12,9 @@ import {
   FETCH_METHOD,
   getCurrentMode,
   lightGray,
+  LOGO_DIMENSIONS_LIMITATION,
+  LOGO_SIZE_LIMITATION_PRINT,
+  LOGO_SIZE_LIMITATION_WEB,
   MODE_REACT_ONLY,
 } from '../../../Constants/Constants';
 import { fetchWrapper, isProd } from '../../../Utils/formFunctionHelpers';
@@ -94,6 +97,8 @@ export default function OrgProfilesBasicInfo() {
   const [uploadTarget, setUploadTarget] = useState<'Web' | 'Print'>('Web');
   const [isFetchingOrg, setIsFetchingOrg] = useState(true);
   const [dateForUpdatingPrintLogo, setDateForUpdatingPrintLogo] = useState('');
+  const [isUploadingWeb, setIsUploadingWeb] = useState(false);
+  const [isUploadingPrint, setIsUploadingPrint] = useState(false);
 
   const openUploadDialog = (target: 'Web' | 'Print') => {
     setUploadTarget(target);
@@ -104,12 +109,16 @@ export default function OrgProfilesBasicInfo() {
     !isProd && console.log('Logo Saved!', files[0]);
     let fileContent: any;
     const isForPrint = uploadTarget === 'Print';
+    isForPrint ? setIsUploadingPrint(true) : setIsUploadingWeb(true);
 
     const successCallback = () => {
       if (isForPrint) {
         const today = new Date().toString();
         const currentTime = `${today.slice(16, 24)}, ${today.slice(4, 10)}`;
         setDateForUpdatingPrintLogo(currentTime);
+        setIsUploadingPrint(false);
+      } else {
+        setIsUploadingWeb(false);
       }
       formikOrg.setFieldValue(`logos.logoFor${uploadTarget}`, fileContent);
       // Update Portal Context - orgInfo to make sure everything is synced among sections
@@ -117,41 +126,66 @@ export default function OrgProfilesBasicInfo() {
       succeededToExecute('');
     };
 
-    const logoFile = new FileReader();
-    logoFile.addEventListener('load', (data) => {
-      fileContent = data.target?.result;
+    const getLogoFileData = () => {
+      const data = new FormData();
+      const logoFile = files[0];
+
+      data.append('image', logoFile);
+      data.append('image_mime', logoFile.type);
+      data.append('image_format', isForPrint ? 'PRINT' : 'WEB');
+      return data;
+    };
+
+    const logoFileInstance = new FileReader();
+    logoFileInstance.addEventListener('load', (fileData) => {
+      fileContent = fileData.target?.result;
       const logoImg = new Image();
       logoImg.src = fileContent;
+
+      const failedToUploadLogo = (errCode: number) => {
+        let errMsg = `The image need to be less than ${LOGO_SIZE_LIMITATION_WEB / 1024 / 1024}MB`;
+
+        if (isForPrint) {
+          errMsg = `The image need to be less than ${LOGO_SIZE_LIMITATION_PRINT / 1024 / 1024}MB`;
+        }
+        failedToExecute(errCode === 413 ? errMsg : '');
+        setIsFetchingOrg(false);
+        setIsUploadingWeb(false);
+        setIsUploadingPrint(false);
+      };
+
+      if (isForPrint) {
+        setOpen(false);
+
+        orgId !== 0 &&
+          fetchWrapper(
+            api_prefix() + `/organizations/${orgId}/logos`,
+            FETCH_METHOD.POST,
+            successCallback,
+            getLogoFileData(),
+            failedToUploadLogo
+          );
+        return;
+      }
+
       logoImg.onload = () => {
-        if (logoImg.height > 200) {
-          failedToExecute('Image height must be 200px or smaller');
+        if (logoImg.height > LOGO_DIMENSIONS_LIMITATION) {
+          failedToExecute(`Image height must be ${LOGO_DIMENSIONS_LIMITATION}px or smaller`);
           return;
         }
-        if (logoImg.width > 200) {
-          failedToExecute('Image width must be 200px or smaller');
+        if (logoImg.width > LOGO_DIMENSIONS_LIMITATION) {
+          failedToExecute(`Image width must be ${LOGO_DIMENSIONS_LIMITATION}px or smaller`);
           return;
         }
 
         setOpen(false);
         if (!isReactOnlyMode) {
-          const failedToUploadLogo = () => {
-            failedToExecute('');
-            setIsFetchingOrg(false);
-          };
-
-          const data = new FormData();
-          const logoFile = files[0];
-
-          data.append('image', logoFile);
-          data.append('image_mime', logoFile.type);
-          data.append('image_format', isForPrint ? 'PRINT' : 'WEB');
-
           orgId !== 0 &&
             fetchWrapper(
               api_prefix() + `/organizations/${orgId}/logos`,
               FETCH_METHOD.POST,
               successCallback,
-              data,
+              getLogoFileData(),
               failedToUploadLogo
             );
         } else {
@@ -159,7 +193,7 @@ export default function OrgProfilesBasicInfo() {
         }
       };
     });
-    logoFile.readAsDataURL(files[0]);
+    logoFileInstance.readAsDataURL(files[0]);
   };
 
   const handleSaveOrgProfile = () => {
@@ -330,15 +364,17 @@ export default function OrgProfilesBasicInfo() {
             </div>
           )}
 
-          <Button className={classes.uploadBtn} onClick={() => openUploadDialog('Web')}>
-            Upload New
+          <Button className={classes.uploadBtn} onClick={() => openUploadDialog('Web')} disabled={isUploadingWeb}>
+            {isUploadingWeb ? <CircularProgress size={20} /> : 'Upload New'}
           </Button>
 
           <Typography className={classes.helperText} variant="body2">
-            The supported formats for uploading your logo include: PNG, or JPG file under 1 MB in size.
+            The supported formats for uploading your logo include: PNG, or JPG file under{' '}
+            {LOGO_SIZE_LIMITATION_WEB / 1024 / 1024} MB in size.
+            {/* The calculation is to convert bytes into megabytes */}
           </Typography>
           <Typography className={classes.helperText} variant="body2">
-            The logo dimension cannot exceed 200 by 200 pixels.
+            The logo dimension cannot exceed {LOGO_DIMENSIONS_LIMITATION} by {LOGO_DIMENSIONS_LIMITATION} pixels.
           </Typography>
         </Grid>
 
@@ -359,12 +395,14 @@ export default function OrgProfilesBasicInfo() {
             )}
           </div>
 
-          <Button className={classes.uploadBtn} onClick={() => openUploadDialog('Print')}>
-            Upload New
+          <Button className={classes.uploadBtn} onClick={() => openUploadDialog('Print')} disabled={isUploadingPrint}>
+            {isUploadingPrint ? <CircularProgress size={20} /> : 'Upload New'}
           </Button>
 
           <Typography className={classes.helperText} variant="body2">
-            If available please include the .eps file of your company logo.
+            If available please include the .eps file of your company logo and it should be under{' '}
+            {LOGO_SIZE_LIMITATION_PRINT / 1024 / 1024} MB in size.
+            {/* The calculation is to convert bytes into megabytes */}
           </Typography>
         </Grid>
       </Grid>
@@ -373,7 +411,7 @@ export default function OrgProfilesBasicInfo() {
         open={open}
         onSave={(file) => postLogo(file)}
         acceptedFiles={uploadTarget === 'Web' ? ['image/jpeg', 'image/png'] : ['.eps']}
-        maxFileSize={1048576}
+        maxFileSize={uploadTarget === 'Web' ? LOGO_SIZE_LIMITATION_WEB : LOGO_SIZE_LIMITATION_PRINT}
         filesLimit={1}
         onClose={() => setOpen(false)}
       />