CR026 - upload file size and label

src/pages/authentication/auth-forms/BusCustomFormWizard.js

@@ -55,8 +55,15 @@ import {PNSPS_LONG_BUTTON_THEME} from "../../../themes/buttonConst";
 import {ThemeProvider} from "@emotion/react";
 import {FormattedMessage, useIntl} from "react-intl";
 //import { Invaild } from 'utils/IconUtils';
-import { handleActionKeyDown, notifyActionError } from 'utils/CommonFunction';
-import { ADDRESS_LINE_MAX_LENGTH, isAddressLineWithinLimit, isRegisterAddressValid } from 'utils/registerValidation';
+import { handleActionKeyDown, notifyActionError, notifyActionWarning } from 'utils/CommonFunction';
+import {
+    ADDRESS_LINE_MAX_LENGTH,
+    isAddressLineWithinLimit,
+    isRegisterAddressValid,
+    MAX_REGISTER_UPLOAD_FILES,
+    MAX_REGISTER_FILE_SIZE_BYTES,
+    MAX_REGISTER_TOTAL_FILE_SIZE_BYTES
+} from 'utils/registerValidation';
 
 // ============================|| FIREBASE - REGISTER ||============================ //
 
@@ -367,6 +374,10 @@ const BusCustomFormWizard = (props) => {
         const uploadFileList = event.target.files;
         const saveFileList = [];
         var currentIndex = 0;
+        let exceededMaxFiles = false;
+        let exceededFileSize = false;
+        let exceededTotalSize = false;
+        let currentTotalSize = 0;
 
         if (currentFileList.length != null) {
             currentIndex = currentFileList.length;
@@ -375,10 +386,16 @@ const BusCustomFormWizard = (props) => {
                 // file.id = currentIndex;
                 updateList.items.add(file);
                 saveFileList.push(file);
+                currentTotalSize += file.size || 0;
             }
         }
 
-        for (let i = 0; i < uploadFileList.length && currentIndex < 5; i++) {
+        for (let i = 0; i < uploadFileList.length; i++) {
+            if (saveFileList.length >= MAX_REGISTER_UPLOAD_FILES) {
+                exceededMaxFiles = true;
+                break;
+            }
+
             const file = event.target.files[i]
             let isDuplicate = false;
 
@@ -389,14 +406,34 @@ const BusCustomFormWizard = (props) => {
                     break;
                 }
             }
-            if (!isDuplicate && i + currentIndex < 5) {
-                file.id = currentIndex + i
-                saveFileList.push(file)
-                updateList.items.add(file);
+            if (isDuplicate) {
+                continue;
             }
-            // console.log("currentIndex")
-            // console.log(currentIndex)
+            if (file.size > MAX_REGISTER_FILE_SIZE_BYTES) {
+                exceededFileSize = true;
+                continue;
+            }
+            if (currentTotalSize + file.size > MAX_REGISTER_TOTAL_FILE_SIZE_BYTES) {
+                exceededTotalSize = true;
+                continue;
+            }
+
+            file.id = saveFileList.length
+            saveFileList.push(file)
+            updateList.items.add(file);
+            currentTotalSize += file.size;
         }
+
+        if (exceededMaxFiles) {
+            notifyActionWarning(intl.formatMessage({ id: 'uploadMaxFileWarning' }));
+        }
+        if (exceededFileSize) {
+            notifyActionWarning(intl.formatMessage({ id: 'uploadFileSizeWarning' }));
+        }
+        if (exceededTotalSize) {
+            notifyActionWarning(intl.formatMessage({ id: 'uploadTotalFileSizeWarning' }));
+        }
+
         let updatedFileList = updateList.files;
 
         setFileListData(saveFileList)
@@ -1558,6 +1595,9 @@ const BusCustomFormWizard = (props) => {
                                                 <Typography display="inline" variant="h6" component="span" sx={{ color: 'primary.primary' }}>
                                                     <FormattedMessage id="pleaseUploadDoc"/>
                                                 </Typography>
+                                                <Typography display="inline" variant="h6" component="span" sx={{ color: 'primary.primary' }}>
+                                                    <FormattedMessage id="uploadBrFileRemark"/>
+                                                </Typography>
                                                 {/* <Typography display="inline" variant="h6" component="span" sx={{ fontSize: 12,color: 'primary.primary'}}>如: 香港身份證; 護照; 中國內地身份證等</Typography>           */}
                                                 <Stack mt={1} direction="row" justifyContent="flex-start" alignItems="center" spacing={2}>
                                                     <ThemeProvider theme={PNSPS_LONG_BUTTON_THEME}>
@@ -1583,7 +1623,7 @@ const BusCustomFormWizard = (props) => {
                                                             <FormattedMessage id="uploadFile" />
                                                         </Button>
                                                         <input
-                                                            accept="image/png, .jpg, .bmp, .pdf"
+                                                            accept="image/png, image/jpeg, .jpg, .jpeg, .pdf"
                                                             //className={classes.input}
                                                             id="contained-button-file"
                                                             multiple

src/pages/authentication/auth-forms/CustomFormWizard.js

@@ -47,8 +47,16 @@ import { FormattedMessage, useIntl } from "react-intl";
 import { Link } from 'react-router-dom';
 import { PNSPS_LONG_BUTTON_THEME } from "../../../themes/buttonConst";
 import * as HttpUtils from "../../../utils/HttpUtils";
-import { handleActionKeyDown, notifyActionError } from 'utils/CommonFunction';
-import { ADDRESS_LINE_MAX_LENGTH, isAddressLineWithinLimit, isRegisterAddressValid } from 'utils/registerValidation';
+import { handleActionKeyDown, notifyActionError, notifyActionWarning } from 'utils/CommonFunction';
+import {
+    ADDRESS_LINE_MAX_LENGTH,
+    isAddressLineWithinLimit,
+    isRegisterAddressValid,
+    MAX_REGISTER_UPLOAD_FILES,
+    MAX_REGISTER_FILE_SIZE_BYTES,
+    MAX_REGISTER_TOTAL_FILE_SIZE_BYTES
+} from 'utils/registerValidation';
+
 // ============================|| FIREBASE - REGISTER ||============================ //
 
 const CustomFormWizard = (props) => {
@@ -445,6 +453,10 @@ const CustomFormWizard = (props) => {
         const uploadFileList = event.target.files;
         const saveFileList = [];
         var currentIndex = 0;
+        let exceededMaxFiles = false;
+        let exceededFileSize = false;
+        let exceededTotalSize = false;
+        let currentTotalSize = 0;
 
         if (currentFileList.length != null) {
             currentIndex = currentFileList.length;
@@ -453,10 +465,16 @@ const CustomFormWizard = (props) => {
                 // file.id = currentIndex;
                 updateList.items.add(file);
                 saveFileList.push(file);
+                currentTotalSize += file.size || 0;
             }
         }
 
-        for (let i = 0; i < uploadFileList.length && currentIndex < 5; i++) {
+        for (let i = 0; i < uploadFileList.length; i++) {
+            if (saveFileList.length >= MAX_REGISTER_UPLOAD_FILES) {
+                exceededMaxFiles = true;
+                break;
+            }
+
             const file = event.target.files[i]
             let isDuplicate = false;
 
@@ -467,13 +485,34 @@ const CustomFormWizard = (props) => {
                     break;
                 }
             }
-            if (!isDuplicate && i + currentIndex < 5) {
-                file.id = currentIndex + i
-                saveFileList.push(file)
-                updateList.items.add(file);
+            if (isDuplicate) {
+                continue;
+            }
+            if (file.size > MAX_REGISTER_FILE_SIZE_BYTES) {
+                exceededFileSize = true;
+                continue;
+            }
+            if (currentTotalSize + file.size > MAX_REGISTER_TOTAL_FILE_SIZE_BYTES) {
+                exceededTotalSize = true;
+                continue;
             }
 
+            file.id = saveFileList.length
+            saveFileList.push(file)
+            updateList.items.add(file);
+            currentTotalSize += file.size;
         }
+
+        if (exceededMaxFiles) {
+            notifyActionWarning(intl.formatMessage({ id: 'uploadMaxFileWarning' }));
+        }
+        if (exceededFileSize) {
+            notifyActionWarning(intl.formatMessage({ id: 'uploadFileSizeWarning' }));
+        }
+        if (exceededTotalSize) {
+            notifyActionWarning(intl.formatMessage({ id: 'uploadTotalFileSizeWarning' }));
+        }
+
         let updatedFileList = updateList.files;
 
         setFileListData(saveFileList)
@@ -1887,6 +1926,9 @@ const CustomFormWizard = (props) => {
                                                 <Typography component="span" variant="subtitle1" sx={{ color: 'primary.primary', display: 'block' }}>
                                                     <FormattedMessage id="pleaseUploadIdDocSubTitle" />
                                                 </Typography>
+                                                <Typography component="span" variant="subtitle1" sx={{ color: 'primary.primary', display: 'block' }}>
+                                                    <FormattedMessage id="uploadBrFileRemark" />
+                                                </Typography>
                                                 <Stack mt={1} direction="row" justifyContent="flex-start" alignItems="center" spacing={2}>
                                                     <ThemeProvider theme={PNSPS_LONG_BUTTON_THEME}>
                                                         <Button
@@ -1911,7 +1953,7 @@ const CustomFormWizard = (props) => {
                                                             <FormattedMessage id="uploadIdDoc" />
                                                         </Button>
                                                         <input
-                                                            accept="image/png, .jpg, .bmp, .pdf"
+                                                            accept="image/png, image/jpeg, .jpg, .jpeg, .pdf"
                                                             //className={classes.input}
                                                             id="contained-button-file"
                                                             multiple

src/translations/en.json

@@ -59,7 +59,7 @@
 
   "MSG.registerIAmSmart": "You may click the \"iAM Smart\" button to fill the personal information automatically or enter the information manually to activate the PNSPS account now.<br/>If you want to use \"iAM Smart\" to fill the personal information, please download the \"iAM Smart\" mobile app and register as an \"iAM Smart\" user first.",
   "MSG.registerPersonal": "To complete the online application, you need to upload digital copies of identification documents.<br/>e.g. Hong Kong Identity Card, Passport, Mainland China Identity Card, Professional Practicing Certificate, etc.",
-  "MSG.registerOrg": "You need to upload the proof documents for the online application.<br/>e.g. Business Registration Certificate, Professional Practicing Certificate, etc.",
+  "MSG.registerOrg": "You need to upload the Business Registration Certificate for the online application.",
   "MSG.paymentMsg": "Your application and payment have been received",
   "MSG.expiredApp": "Public Notice application has expired",
 
@@ -283,10 +283,14 @@
   "sameAsBusinessRegistrationCert": "Same as Business Registration Certificate",
   "businessRegCert": "Business Registration Certificate",
   "businessRegCertNumber": "Hong Kong Business Reg Cert Number",
-  "businessRegCertAndDoc":"Business Registration Certificate and other documents",
+  "businessRegCertAndDoc":"Business Registration Certificate",
   "businessRegCertExpiryDate": "Business registration certificate expiry date",
-  "pleaseUploadDoc": "Please upload a digital file of your valid business registration certificate and other documents to verify your identity.",
-  "uploadFile": "Upload business registration certificate and other documents",
+  "pleaseUploadDoc": "Please upload a digital file of your valid business registration certificate to verify your identity.",
+  "uploadBrFileRemark": "Accept files in .png, .jpg, .jpeg and .pdf formats; maximum 5 files; each file within 10MB; total within 50MB.",
+  "uploadMaxFileWarning": "You can upload a maximum of 5 files.",
+  "uploadFileSizeWarning": "Each file must be within 10MB.",
+  "uploadTotalFileSizeWarning": "Total upload size must be within 50MB.",
+  "uploadFile": "Upload business registration certificate",
   "pleaseUploadIdDoc": "Please upload a digital file of your valid identity document to verify your identity.",
   "pleaseUploadIdDocSubTitle": "Such as: Hong Kong ID card; passport; Mainland China ID card; professional practice certificate, etc.",
   "uploadIdDoc": "Upload identity document",

src/translations/zh-CN.json

@@ -98,7 +98,7 @@
   
   "MSG.registerIAmSmart": "你可点击「智方便」按钮，系统会自动输入个人资料，或自行输入个人资料，以即时启动 公共启事提交及缴费系统 帐户。<br/>如欲使用「智方便」提供个人资料，请先下载「智方便」流动应用程式并登记成为「智方便」用户。",
   "MSG.registerPersonal": "需上载身份证明文件数码档案以进行网上申请。 <br/>如：香港身份证; 护照; 中国内地身份证; 专业执业证书等",
-  "MSG.registerOrg": "需上载以下任何一份证明文件以进行网上申请。 <br/>如：商业登记证；专业执业证书",
+  "MSG.registerOrg": "网上申请需上载商业登记证。",
   "MSG.paymentMsg": "你的申请和付款已收到",
   "MSG.expiredApp": "公共启事申请已过期",
 
@@ -324,10 +324,14 @@
   "sameAsBusinessRegistrationCert": "与商业登记证相同",
   "businessRegCert": "商业登记证",
   "businessRegCertNumber": "香港商业登记证号码",
-  "businessRegCertAndDoc":"商业登记证及其他文件",
+  "businessRegCertAndDoc":"商业登记证",
   "businessRegCertExpiryDate": "商业登记证有效期届满日期",
-  "pleaseUploadDoc": "请上传你的 有效商业登记证及其他文件 的数码档案，以验证你的身份。",
-  "uploadFile": "上传商业登记证及其他文件",
+  "pleaseUploadDoc": "请上传你的有效商业登记证的数码档案，以验证你的身份。",
+  "uploadBrFileRemark": "接受 .png、.jpg、.jpeg 及 .pdf 档案格式；最多可上传 5 个档案；每个档案不大于 10MB；合计不大于 50MB。",
+  "uploadMaxFileWarning": "最多可上传 5 个档案。",
+  "uploadFileSizeWarning": "每个档案须不大于 10MB。",
+  "uploadTotalFileSizeWarning": "上传档案合计须不大于 50MB。",
+  "uploadFile": "上传商业登记证",
   "pleaseUploadIdDoc": "请上传你的 有效身份证明文件 的数码档案，以验证你的身份。",
   "pleaseUploadIdDocSubTitle": "如: 香港身份证; 护照; 中国内地身份证; 专业执业证书等",
   "uploadIdDoc": "上传身份证明文件",

src/translations/zh-HK.json

@@ -98,7 +98,7 @@
 
   "MSG.registerIAmSmart": "你可點擊「智方便」按鈕，系統會自動輸入個人資料，或自行輸入個人資料，以即時啟動 公共啟事提交及繳費系統 帳戶。<br/>如欲使用「智方便」提供個人資料，請先下載「智方便」流動應用程式並登記成為「智方便」用戶。",
   "MSG.registerPersonal": "需上載身份證明文件數碼檔案以進行網上申請。<br/>如：香港身份證; 護照; 中國內地身份證; 專業執業証書等",
-  "MSG.registerOrg": "需上載以下任何一份證明文件以進行網上申請。<br/>如：商業登記證；專業執業證書",
+  "MSG.registerOrg": "網上申請需上載商業登記證。",
   "MSG.paymentMsg": "你的申請和付款已收到",
   "MSG.expiredApp": "公共啟事申請已過期",
 
@@ -319,13 +319,17 @@
   "sameAsBusinessRegistrationCert": "與商業登記證相同",
   "businessRegCert": "商業登記證",
   "businessRegCertNumber": "香港商業登記證號碼",
-  "businessRegCertAndDoc":"商業登記證及其他文件",
+  "businessRegCertAndDoc":"商業登記證",
   "businessRegCertExpiryDate": "商業登記證有效期屆滿日期",
-  "pleaseUploadDoc": "請上傳你的 有效商業登記證及其他文件 的數碼檔案，以驗證你的身份。",
+  "pleaseUploadDoc": "請上傳你的有效商業登記證的數碼檔案，以驗證你的身份。",
+  "uploadBrFileRemark": "接受 .png、.jpg、.jpeg 及 .pdf 檔案格式；最多可上傳 5 個檔案；每個檔案不大於 10MB；合計不大於 50MB。",
+  "uploadMaxFileWarning": "最多可上傳 5 個檔案。",
+  "uploadFileSizeWarning": "每個檔案須不大於 10MB。",
+  "uploadTotalFileSizeWarning": "上傳檔案合計須不大於 50MB。",
   "pleaseUploadIdDoc": "請上傳你的 有效身份證明文件 的數碼檔案，以驗證你的身份。",
   "pleaseUploadIdDocSubTitle": "如: 香港身份證; 護照; 中國內地身份證; 專業執業証書等",
   "uploadIdDoc": "上傳身份證明文件",
-  "uploadFile": "上傳商業登記證及其他文件",
+  "uploadFile": "上傳商業登記證",
   "fileName": "檔案名稱",
   "forOrgUser": "機構/公司用戶",
   "forIndUser": "個人用戶",

src/utils/registerValidation.js

@@ -1,5 +1,9 @@
 export const ADDRESS_LINE_MAX_LENGTH = 40;
 
+export const MAX_REGISTER_UPLOAD_FILES = 5;
+export const MAX_REGISTER_FILE_SIZE_BYTES = 10 * 1024 * 1024;
+export const MAX_REGISTER_TOTAL_FILE_SIZE_BYTES = 50 * 1024 * 1024;
+
 export function isAddressLineWithinLimit(line, maxLen = ADDRESS_LINE_MAX_LENGTH) {
     if (line == null || line === '') return true;
     return line.length <= maxLen;