update upload file in register

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

@@ -30,7 +30,7 @@ import { strengthColorChi, strengthIndicator } from 'utils/password-strength';
 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 UploadFileTable from './UploadFileTable';
 
 // assets
@@ -44,7 +44,8 @@ const CustomFormWizard = (props) => {
     const [level, setLevel] = useState();
     const [showPassword, setShowPassword] = useState(false);
     const [showConfirmPassword, setshowConfirmPassword] = useState(false);
-    const [fileList, setFileList] = useState(null);
+    const [fileList, setFileList] = useState([]);
+    const [fileListData, setFileListData] = useState([]);
 
     const handleClickShowPassword = () => {
         setShowPassword(!showPassword);
@@ -111,28 +112,28 @@ const CustomFormWizard = (props) => {
     };
 
     const handleFileUpload = (event)=>{
-        const getfileList = event.target.files
-        const currentIndex = fileList.length!=null?fileList.length:0
-        const index = 0;
-        getfileList.forEach((element) => element.id=index+1);
-        getfileList.forEach((element) => {
-            console.log({ element });
-            element.id=currentIndex+numCallbackRuns;
-            numCallbackRuns++;
-        });
-        console.log(getfileList)
-        setFileList(getfileList)
-        // HttpUtils.fileUpload(
-        //     {
-        //         refType:"identification",
-        //         refId: -1,
-        //         file: event.target.files[0],
-        //         onSuccess: (response)=>{
-        //             console.log(response);
-        //             setOpen(true);
-        //         }
-        //     }
-        // );
+        const uploadFileList = event.target.files;
+        const saveFileList = [];
+        var currentIndex = 0;
+        // var index = 0;
+        console.log(uploadFileList);
+        console.log(uploadFileList.length);
+        console.log(fileList);
+
+        if (!fileList.length==null){
+            currentIndex = fileList.length;
+        }
+
+        for (let i = 0; i < uploadFileList.length; i++){
+            const file = event.target.files[i]
+            file.id = currentIndex+i+1
+            saveFileList.push(file)
+        }
+        
+        console.log(saveFileList);
+        console.log(uploadFileList);
+        setFileListData(saveFileList)
+        setFileList(uploadFileList);
     };
 
     const {handleSubmit} = useForm({})
@@ -182,16 +183,24 @@ const CustomFormWizard = (props) => {
             .then((response) => {
                 console.log("Success")
                 console.log(response)
+                HttpUtils.fileUpload(
+                    {
+                        refType:"identification",
+                        refId: response.data.id,
+                        file: fileList[0],
+                        onSuccess: (response)=>{
+                            console.log(response);
+                            // setOpen(true);
+                        }
+                    }
+                );
             })
             .catch(error => {
                 console.error(error);
             });
-            // uploadFile();
-            
+        }
     }
 
-}
-
     const formik = useFormik({
         initialValues:({
             username:'',
@@ -857,7 +866,7 @@ const CustomFormWizard = (props) => {
                                                 <Typography display="inline" variant="h6" sx={{ fontSize: 12,color: 'primary.primary'}}>請上傳你的 有效身份證明文件 的數碼檔案，以驗證你的身份。</Typography>          
                                                 <Typography display="inline" variant="h6" sx={{ fontSize: 12,color: 'primary.primary'}}>如: 香港身份證; 護照; 中國內地身份證等</Typography>          
                                                 <Stack mt={1} direction="row" justifyContent="flex-start" alignItems="center" spacing={2}>
-                                                    <Button variant="contained" component="label" sx={{ fontSize: 12,height:'25px'}}>上傳身份證明文件
+                                                    <Button variant="contained" component="label" sx={{ fontSize: 12,height:'40px'}}>上傳身份證明文件
                                                         <input
                                                         accept="image/*"
                                                         //className={classes.input}
@@ -868,10 +877,10 @@ const CustomFormWizard = (props) => {
                                                         style={{display: 'none'}}
                                                         />
                                                     </Button>
-                                                    {fileList !=null?
-                                                    <UploadFileTable recordList={fileList} />:null}
                                                     <Typography display="inline" variant="h6" sx={{ fontSize: 12, color: 'primary.primary'}}>如: 香港身份證; 護照; 中國內地身份證等</Typography>          
                                                 </Stack>
+                                                {fileList !=null?
+                                                    <UploadFileTable recordList={fileListData} />: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>

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

@@ -8,7 +8,7 @@ import {
 import {useEffect} from "react";
 // import {useNavigate} from "react-router-dom";
 // import { useTheme } from '@mui/material/styles';
-// import Checkbox from '@mui/material/Checkbox';
+import {Box} from '@mui/material';
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function UploadFileTable({recordList}) {
@@ -48,38 +48,39 @@ export default function UploadFileTable({recordList}) {
         {
             id: 'name',
             field: 'name',
-            headerName: 'Name',
+            headerName: '檔案名稱',
             flex: 1,
         },
         {
             id: 'size',
             field: 'size',
-            headerName: 'Size',
+            headerName: '檔案大小',
             flex: 1,
         },
         {
             id: 'type',
             field: 'type',
-            headerName: 'Type',
+            headerName: '檔案類型',
             flex: 1,
         },
     ];
 
     return (
-        <div style={{height: 400, width: '100%'}}>
+        <Box style={{height: '20%', width: '100%',}}>
             <DataGrid
                 rows={rows}
                 columns={columns}
                 editMode="row"
+                sx={{border:1}}
                 rowModesModel={rowModesModel}
                 initialState={{
                     pagination: {
                         paginationModel: {page: 0, pageSize: 5},
                     },
                 }}
-                pageSizeOptions={[5, 10]}
+                // pageSizeOptions={[5, 10]}
                 autoHeight
             />
-        </div>
+        </Box>
     );
 }

src/utils/HttpUtils.js

@@ -62,6 +62,7 @@ export const fileUpload = ({ refType, refId, file,refCode, onSuccess, onFail, on
         if(refCode){
             formData.append("refCode", refCode);
         }
+        console.log(formData)
         axios.post(FILE_UP_POST,formData,{
             headers: {
                 "Content-Type":"multipart/form-data"