upload file with bug

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

@@ -92,6 +92,7 @@ const BusCustomFormWizard = (props) => {
                       + "於所有文本、平面圖像、圖畫、圖片、照片以及數據或其他資料的匯編，均受版權保障。\n香"
                       + "港特別行政區政府是本網頁內所有版權作品的擁有人，除非預先得到政府物流服務署的書面"
                       + "授權，否則嚴禁複製、改編、分發、發布或向公眾提供該等版權作品。"
+    // const refType = "identification";
 
     useEffect(() => {
         changePassword('');
@@ -137,23 +138,65 @@ const BusCustomFormWizard = (props) => {
         }
     };
 
+    useEffect(() => {
+        let updateRowList = new DataTransfer();
+        var updateRowsIndex = updateRows.length;
+        const saveFileList = [];
+
+        if (updateRowsIndex!=null){
+            for (let i = 0; i < updateRowsIndex; i++){
+                const file = updateRows[i]
+                file.id = i;
+                updateRowList.items.add(file);
+                saveFileList.push(file);
+            }
+            let updatedFileList = updateRowList.files;
+            setFileList(updatedFileList);
+            setFileListData(saveFileList)
+            
+        }
+
+    }, [updateRows]);
+
     const handleFileUpload = (event)=>{
+        let updateList = new DataTransfer();
+        let currentFileList = fileListData;
         const uploadFileList = event.target.files;
         const saveFileList = [];
         var currentIndex = 0;
 
-        if (!fileList.length==null){
-            currentIndex = fileList.length;
+        if (currentFileList.length!=null){
+            currentIndex = currentFileList.length;
+            for (let i = 0; i < currentIndex; i++){
+                const file = currentFileList[i]
+                // file.id = currentIndex;
+                updateList.items.add(file);
+                saveFileList.push(file);
+            }
         }
 
-        for (let i = 0; i < uploadFileList.length; i++){
+        for (let i = 0; i < uploadFileList.length && currentIndex<5; i++){
             const file = event.target.files[i]
-            file.id = currentIndex+i+1
-            saveFileList.push(file)
+            let isDuplicate = false;
+
+            // Check if the file name already exists in saveFileList
+            for (let j = 0; j < saveFileList.length; j++) {
+                if (saveFileList[j].name === file.name) {
+                    isDuplicate = true;
+                    break;
+                }
+            }
+            if (!isDuplicate) {
+                file.id = currentIndex+i
+                saveFileList.push(file)
+                updateList.items.add(file);
+            }
+  
         }
+        let updatedFileList = updateList.files;
 
         setFileListData(saveFileList)
-        setFileList(uploadFileList);
+        setFileList(updatedFileList);
     };
 
     useEffect(() => {

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

@@ -27,10 +27,10 @@ import * as yup from 'yup';
 // project import
 // import AnimateButton from 'components/@extended/AnimateButton';
 import { strengthColorChi, strengthIndicator } from 'utils/password-strength';
-import {apiPath} from "auth/utils";
+// import {apiPath} from "auth/utils";
 import axios from "axios";
 import {POST_PUBLIC_USER_REGISTER} from "utils/ApiPathConst";
-import * as HttpUtils from 'utils/HttpUtils';
+// import * as HttpUtils from 'utils/HttpUtils';
 import * as ComboData from "../../../utils/ComboData";
 
 import Loadable from 'components/Loadable';
@@ -96,6 +96,7 @@ const CustomFormWizard = (props) => {
                       + "於所有文本、平面圖像、圖畫、圖片、照片以及數據或其他資料的匯編，均受版權保障。\n香"
                       + "港特別行政區政府是本網頁內所有版權作品的擁有人，除非預先得到政府物流服務署的書面"
                       + "授權，否則嚴禁複製、改編、分發、發布或向公眾提供該等版權作品。"
+    const refType = "identification";
 
     useEffect(() => {
         changePassword('');
@@ -143,17 +144,21 @@ const CustomFormWizard = (props) => {
     };
 
     useEffect(() => {
-        console.log(updateRows);
         let updateRowList = new DataTransfer();
         var updateRowsIndex = updateRows.length;
+        const saveFileList = [];
 
         if (updateRowsIndex!=null){
             for (let i = 0; i < updateRowsIndex; i++){
                 const file = updateRows[i]
+                file.id = i;
                 updateRowList.items.add(file);
+                saveFileList.push(file);
             }
             let updatedFileList = updateRowList.files;
             setFileList(updatedFileList);
+            setFileListData(saveFileList)
+            
         }
 
     }, [updateRows]);
@@ -164,25 +169,21 @@ const CustomFormWizard = (props) => {
         const uploadFileList = event.target.files;
         const saveFileList = [];
         var currentIndex = 0;
-        // console.log("uploadFileList")
-        // console.log(uploadFileList)
-        
+
         if (currentFileList.length!=null){
             currentIndex = currentFileList.length;
             for (let i = 0; i < currentIndex; i++){
                 const file = currentFileList[i]
+                // file.id = currentIndex;
                 updateList.items.add(file);
                 saveFileList.push(file);
             }
         }
-        // console.log("saveFileList")
-        // console.log(saveFileList)
-        
+
         for (let i = 0; i < uploadFileList.length && currentIndex<5; i++){
             const file = event.target.files[i]
             let isDuplicate = false;
-            // console.log("file 1")
-            // console.log(file)
+
             // Check if the file name already exists in saveFileList
             for (let j = 0; j < saveFileList.length; j++) {
                 if (saveFileList[j].name === file.name) {
@@ -191,8 +192,6 @@ const CustomFormWizard = (props) => {
                 }
             }
             if (!isDuplicate) {
-                // console.log("file2")
-                // console.log(file)
                 file.id = currentIndex+i
                 saveFileList.push(file)
                 updateList.items.add(file);
@@ -203,8 +202,6 @@ const CustomFormWizard = (props) => {
 
         setFileListData(saveFileList)
         setFileList(updatedFileList);
-        // console.log("saveFileList2")
-        // console.log(saveFileList)
     };
 
     useEffect(() => {
@@ -256,38 +253,53 @@ const CustomFormWizard = (props) => {
         if (termsAndConNotAccept){
             tncFlag = false
         }
+
+        const user = {
+            username: values.username,
+            password: values.password,
+            name: values.username,
+            enName: values.enName,
+            chName: values.chName,
+            emailAddress: values.email,
+            idDocType:values.idDocType,
+            identification:values.idNo,
+            checkDigit:values.checkDigit,
+            tncFlag:tncFlag,
+            type:"IND",
+        };
+
+        var formData = new FormData();
+        for (let i = 0; i < fileListData.length; i++){
+            const file = fileListData[i]
+            formData.append("multipartFileList", file);
+        }
+        formData.append("refType", refType);
+        
+        for (const [key, value] of Object.entries(user)) {
+            formData.append(key, value);
+        }
         
+        formData.append("userFaxNo", JSON.stringify(userFaxNo));
+        formData.append("userMobileNumber", JSON.stringify(userMobileNumber));
+        formData.append("userAddress", JSON.stringify(userAddress));
+
+        // if(refCode){
+        //     formData.append("refCode", refCode);
+        // }
+
+        console.log("formData:")
+        console.log(formData)
+
         if (isValid){
-            axios.post(`${apiPath}${POST_PUBLIC_USER_REGISTER}`, {
-                username: values.username,
-                password: values.password,
-                name: values.username,
-                enName: values.enName,
-                chName: values.chName,
-                emailAddress: values.email,
-                idDocType:values.idDocType,
-                identification:values.idNo,
-                checkDigit:values.checkDigit,
-                userFaxNo:userFaxNo,
-                userMobileNumber:userMobileNumber,
-                userAddress:userAddress,
-                tncFlag:tncFlag,
-                type:"IND"
+            axios.post(POST_PUBLIC_USER_REGISTER, formData,{
+                headers: {
+                    "Content-Type":"multipart/form-data"
+                }
             })
             .then((response) => {
+                console.log(response)
                 setCheckUpload(true)
-                HttpUtils.fileUpload(
-                    {
-                        refType:"identification",
-                        refId: response.data.id,
-                        file: fileList,
-                        onSuccess: (response)=>{
-                            console.log(response);
-                            // setOpen(true);
-                        setLoding(false);
-                        }
-                    }
-                );
+                setLoding(false);
             })
             .catch(error => {
                 console.error(error);
@@ -341,7 +353,6 @@ const CustomFormWizard = (props) => {
         var validRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
         // var result = reg.test(email);
         var result = email.match(validRegex);
-        console.log("test1: "+result)
         if (result == false) {
             return false;
         }
@@ -599,11 +610,8 @@ const CustomFormWizard = (props) => {
                                                     // getOptionLabel={(idDocTypeComboList) => idDocTypeComboList.label}
                                                     onBlur={formik.handleBlur}
                                                     onChange={(event, newValue) => {
-                                                        // console.log(newValue)
                                                         if (newValue!=null){
-                                                            console.log(newValue)
                                                             setSelectedIdDocType(newValue);
-                                                            // setSelectedIdDocLabel(newValue.label);
                                                             if (newValue.type!="HKID"){
                                                                 formik.setFieldValue("checkDigit","")
                                                             }
@@ -1067,7 +1075,7 @@ const CustomFormWizard = (props) => {
                                                     <Typography display="inline" variant="h6" sx={{ fontSize: 12, color: 'primary.primary'}}>如: 香港身份證; 護照; 中國內地身份證等</Typography>          
                                                 </Stack>
                                                 {fileList !=null?
-                                                    <UploadFileTable recordList={fileListData} setUpdateRows={setUpdateRows} />:null}
+                                                    <UploadFileTable recordList={fileListData} setUpdateRows={setUpdateRows} disableDelete={false}/>:null}
                                                 {/* <Stack mt={1} direction="row" justifyContent="flex-start" alignItems="center" spacing={2}>
                                                     <Button variant="contained" type="submit" sx={{ fontSize: 12,height:'25px'}}>Submit</Button>
                                                     <Button disabled={!formik.isValid} variant="contained" type="submit" sx={{ fontSize: 12,height:'25px'}}>Submit</Button>
@@ -1288,7 +1296,7 @@ const CustomFormWizard = (props) => {
                                             <Stack spacing={1} direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
                                                 <Typography display="inline" variant="h4" sx={{ color: 'primary.primary'}}>身份證明文件</Typography>     
                                                 {fileList !=null?
-                                                    <UploadFileTable recordList={fileListData} updateRows={updateRows} />:null}
+                                                    <UploadFileTable recordList={fileListData} updateRows={updateRows} disableDelete={true}/>:null}
                                             </Stack>
                                         </Grid>
                                     </Grid>

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

@@ -15,7 +15,7 @@ import {
 } from '@mui/material';
 // ==============================|| EVENT TABLE ||============================== //
 
-export default function UploadFileTable({recordList, setUpdateRows}) {
+export default function UploadFileTable({recordList, setUpdateRows, disableDelete}) {
     
     const [rows, setRows] = React.useState(recordList);
     const [rowModesModel,setRowModesModel] = React.useState({});
@@ -45,7 +45,7 @@ export default function UploadFileTable({recordList, setUpdateRows}) {
             ...rowModesModel,
             [id]: { mode: GridRowModes.View, ignoreModifications: true },
         });
-        console.log("test123")
+        console.log("Starting Delete")
         const editedRow = rows.find((row) => row.id === id);
         console.log(editedRow)
         console.log(editedRow.isNew)
@@ -60,6 +60,7 @@ export default function UploadFileTable({recordList, setUpdateRows}) {
             headerName: '',
             width: 30,
             cellClassName: 'actions',
+            hide:{disableDelete},
             getActions: ({id}) => {
                 return [
                     <GridActionsCellItem

src/utils/ApiPathConst.js

@@ -37,4 +37,4 @@ export const GET_FILE_DELETE = apiPath+'/file/delete';
 export const POST_LOGIN = '/login';
 
 //register
-export const POST_PUBLIC_USER_REGISTER = '/user/register';
+export const POST_PUBLIC_USER_REGISTER = apiPath+'/user/register';

src/utils/HttpUtils.js

@@ -54,11 +54,12 @@ export const fileDownload = ({fileId, skey, filename, onError}) =>{
     });
 };
 
-export const fileUpload = ({ refType, refId, file,refCode, onSuccess, onFail, onError}) =>{
+export const fileUpload = ({ refType, refId, files,refCode, onSuccess, onFail, onError}) =>{
+    console.log(files);
     var formData = new FormData();
-    for (let i = 0; i < file.length; i++){
-        const file = file[i]
-        formData.append("multipartFile", file);
+    for (let i = 0; i < files.length; i++){
+        const file = files[i]
+        formData.append("multipartFileList", file);
     }
     // formData.append("multipartFile", file);
     formData.append("refType", refType);