multiple file upload issues capped at 210mb for now

actions/azurestorage.js

@@ -521,10 +521,123 @@ export const uploadFile = async (formContent, containerName, foldername) => {
     const containerClient = new ContainerClient(sasUrl);
 
     const files = formContent;
+    let blobResponseArr = [];
 
     //console.log(...formContent);
     console.log("files...", files, Object.keys(files).length, foldername);
 
+    for (const prop in files) {
+        console.log(`files[${prop}] = ${files[prop][0].size}`);
+        const blobName = foldername + "/files/" + files[prop][0].fieldName;
+
+        console.log(blobName);
+        const blockBlobClient = containerClient.getBlockBlobClient(blobName);
+        const uploadBlobResponse = await blockBlobClient
+            .uploadFile(files[prop][0].path, files[prop].size)
+            .then((data) => {
+                console.log(
+                    "////////////////////////\nfile name:",
+                    files[prop][0].fieldName,
+                    "\n////////////////////////////"
+                );
+                console.log(data);
+
+                let whichLocation =
+                    files[prop][0].fieldName.indexOf("_Statement_of_Case") >
+                        0 ||
+                    files[prop][0].fieldName.indexOf("_-_Statement_of_Case") >
+                        0 ||
+                    files[prop][0].fieldName.indexOf("_-_Application_Form") >
+                        0 ||
+                    files[prop][0].fieldName.indexOf(
+                        "_-_Site_Ownership_Certificate"
+                    ) > 0 ||
+                    files[prop][0].fieldName.indexOf("_-_Decision_Notice") >
+                        0 ||
+                    files[prop][0].fieldName.indexOf("_-_Site_Location_Plan") >
+                        0 ||
+                    files[prop][0].fieldName.indexOf(
+                        "_-_Plans_Drawing_Documents"
+                    ) > 0 ||
+                    files[prop][0].fieldName.indexOf(
+                        "_-_Additional_Plans_Drawings_Documents"
+                    ) > 0 ||
+                    files[prop][0].fieldName.indexOf(
+                        "_-_Design_and_Access_Statement"
+                    ) > 0 ||
+                    files[prop][0].fieldName.indexOf(
+                        "_-_NSB_LPA_Additional_Documents"
+                    ) > 0 ||
+                    files[prop][0].fieldName.indexOf("_-_LPA_Correspondence") >
+                        0 ||
+                    files[prop][0].fieldName.indexOf(
+                        "_-_LPA_Original_Permission"
+                    ) > 0 ||
+                    files[prop][0].fieldName.indexOf(
+                        "_-_LPA's_Registration_Letter"
+                    ) > 0 ||
+                    files[prop][0].fieldName.indexOf(
+                        +"_-_Environmental_Statement"
+                    ) > 0 ||
+                    files[prop][0].fieldName.indexOf("_-_Cost_of_Application") >
+                        0 ||
+                    files[prop][0].fieldName.indexOf(
+                        "_-_Other_Relevant_Material"
+                    ) > 0 ||
+                    files[prop][0].fieldName.indexOf(
+                        "_-_S106_Agreement_or_Unilateral_Undertaking" > 0
+                    )
+                        ? "846040000"
+                        : files[prop][0].fieldName.indexOf("_IP_") > 0
+                        ? "846040005"
+                        : files[prop][0].fieldName.indexOf("_Statement_") > 0
+                        ? "846040002"
+                        : files[prop][0].fieldName.indexOf("_Questionnaire_") >
+                          0
+                        ? "846040001"
+                        : files[prop][0].fieldName.indexOf("_Comments_") > 0
+                        ? "846040003"
+                        : files[prop][0].fieldName.indexOf("_Impact_") > 0
+                        ? "846040001"
+                        : "846040000";
+
+                const tags = {
+                    containerid: containerName,
+                    caseID: foldername.split("/")[0],
+                    documentType: files[prop][0].fieldName.split(".")[1],
+                    blobType: "RepresentationFile",
+                    ishareLocation: whichLocation,
+                };
+                const withTags = blockBlobClient.setTags(tags);
+                const withMeta = blockBlobClient.setMetadata(tags);
+
+                console.log(
+                    `Uploaded block blob ${files[prop][0].fieldName} successfully`
+                    //uploadBlobResponse.requestId
+                );
+
+                blobResponseArr.push({ file: files[prop][0].fieldName });
+            });
+    }
+
+    return blobResponseArr;
+};
+
+export const uploadSingleFile = async (
+    formContent,
+    containerName,
+    foldername
+) => {
+    const containerToken = await createContainerSas(containerName);
+    const sasUrl = `${STORAGE_PATH}/${containerName}?${containerToken}`;
+    const containerClient = new ContainerClient(sasUrl);
+
+    const files = formContent;
+
+    //console.log(...formContent);
+    console.log("files...", files, Object.keys(files).length, foldername);
+    let blobResponseArr = [];
+
     for (const prop in files) {
         console.log(`files[${prop}] = ${files[prop][0].size}`);
         const blobName = foldername + "/files/" + files[prop][0].fieldName;
@@ -534,6 +647,17 @@ export const uploadFile = async (formContent, containerName, foldername) => {
         const uploadBlobResponse = await blockBlobClient.uploadFile(
             files[prop][0].path,
             files[prop].size
+            // {
+            //     blobHTTPHeaders: {
+            //         blobContentType: "application/octet-stream",
+            //     },
+            //     onProgress: (progress) => {
+            //         // Log upload progress, you can emit this back to the client
+            //         console.log(
+            //             `Progress: ${progress.loadedBytes} bytes uploaded`
+            //         );
+            //     },
+            // }
         );
 
         console.log(
@@ -600,7 +724,12 @@ export const uploadFile = async (formContent, containerName, foldername) => {
             `Uploaded block blob ${files[prop][0].fieldName} successfully`,
             uploadBlobResponse.requestId
         );
+
+        blobResponseArr.push({ file: files[prop][0].fieldName });
+        // return uploadBlobResponse;
     }
+
+    return blobResponseArr;
 };
 
 export const uploadRepFiles = async (

actions/index.js

@@ -1497,6 +1497,44 @@ export const uploadFiles = async (
     }
 };
 
+export const uploadSingleFile = async (filesObj, containerID, casefolderID) => {
+    let files = filesObj;
+
+    //console.log(formValues);
+    var formData = new FormData();
+    formData.append("containerID", containerID);
+    formData.append("casefolderID", casefolderID);
+
+    // files.forEach((file) => formData.append("files", file));
+
+    for (let i = 0; i < files.length; i++) {
+        console.log(files.length);
+        // for (let j = 0; j < files[i].length; j++) {
+        //     console.log("upload files:", files[i][j].name);
+        formData.append(files[i].name, files[i]);
+        // }
+    }
+
+    //console.log(formData);
+
+    var queryUrl = "/api/file/uploadsinglefile";
+
+    const config = {
+        method: "post",
+        url: queryUrl,
+        data: formData,
+        headers: { "content-type": "multipart/form-data" },
+    };
+
+    //console.log(config);
+    try {
+        const res = await axios(config);
+        return res.data;
+    } catch (error) {
+        consoleLogger(error);
+    }
+};
+
 export const uploadRepFiles = async (
     formValues,
     filesObj,

components/elements/index.js

@@ -1,4 +1,6 @@
 import { JSONPath as jsonpath } from "jsonpath-plus";
+import axios from "axios";
+
 import _ from "lodash";
 import useTranslation from "next-translate/useTranslation";
 import Link from "next/link";
@@ -8,12 +10,17 @@ import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 import Dropzone from "react-dropzone";
 import { Field, FieldArray } from "redux-form";
-import { deleteBlob, getFilesFromBlobHashed } from "../../actions";
+import {
+    deleteBlob,
+    getFilesFromBlobHashed,
+    uploadSingleFile,
+} from "../../actions";
 import fieldLookup from "../../data/crmfieldlookuptranslations.json";
 import pickListLookup from "../../data/picklistLookups.json";
 
 import dynamic from "next/dynamic";
 import { bytesToSize, getThumbnailIconByExtension } from "../utils";
+import { setFileCount } from "../../store/appealType/action";
 
 import {
     addDays,
@@ -27,6 +34,9 @@ import {
 import "react-quill-new/dist/quill.snow.css";
 const ReactQuill = dynamic(() => import("react-quill-new"), { ssr: false });
 
+import { useStore as store, useSelector } from "react-redux";
+import { useDispatch } from "react-redux";
+
 const RenderTextfield = ({
     id,
     className,
@@ -1736,6 +1746,8 @@ export function FileUploadField(props) {
                 fileList={props.fileList}
                 setFilesForAppeal={props.setFilesForAppeal}
                 containerID={props.containerID}
+                uploadCount={props.uploadCount}
+                setFileCount={props.setFileCount}
             />
         </>
     );
@@ -1935,10 +1947,41 @@ const RenderFileUpload = (field) => {
         return arr.filter((obj) => Object.keys(obj).length > 0);
     }
 
+    const [errorMessage, setErrorMessage] = useState(null);
+    const [rejectedFiles, setRejectedFiles] = useState([]); // Store rejected files
+
+    const [completedUploadFiles, setCompletedUploadFiles] = useState(false);
+    const [uploadCountMessage, setUploadCountMessage] = useState("");
+
+    const handleDropRejected = (fileRejections) => {
+        const errors = fileRejections
+            .map(({ file, errors }) => {
+                return errors.map((error) => {
+                    if (error.code === "file-too-large") {
+                        return `${file.name} is too large. Please upload a smaller file.`;
+                    }
+                    if (error.code === "file-invalid-type") {
+                        return `${file.name} has an invalid type. Please upload an image.`;
+                    }
+                    return `${file.name} is invalid.`;
+                });
+            })
+            .flat(); // Flatten the errors array
+
+        setRejectedFiles(errors); // Store the error messages for rejected files
+    };
+
+    // Handle accepted files (clear error message when files are accepted)
+    const handleDropAccepted = () => {
+        setErrorMessage(null); // Clear any previous error messages when files are accepted
+        setRejectedFiles([]); // Clear any previously rejected file errorsss
+    };
+
     return (
         <>
             <Dropzone
                 key={field.input.name + "_key"}
+                maxSize={210 * 1024 * 1024}
                 accept={{
                     "application/pdf": [".pdf"],
                     "application/msword": [".doc"],
@@ -1952,6 +1995,7 @@ const RenderFileUpload = (field) => {
                         [".xlsx"],
                 }}
                 onDrop={(filesToUpload, e) => {
+                    setCompletedUploadFiles(false);
                     const renamedAcceptedFiles = filesToUpload.map(
                         (file) =>
                             new File(
@@ -1965,7 +2009,25 @@ const RenderFileUpload = (field) => {
                             )
                     );
                     field.input.onChange(renamedAcceptedFiles);
+
+                    setUploadCountMessage(renamedAcceptedFiles.length);
+
+                    console.log("werwerw");
+                    field.setFileCount(
+                        field.uploadCount + renamedAcceptedFiles.length
+                    );
+
+                    uploadSingleFile(
+                        renamedAcceptedFiles,
+                        field.containerID,
+                        field.ticketnumber
+                    ).then((data) => {
+                        console.log(data);
+                        setCompletedUploadFiles(true);
+                    });
                 }}
+                onDropRejected={handleDropRejected}
+                onDropAccepted={handleDropAccepted}
             >
                 {({ getRootProps, getInputProps }) => (
                     <>
@@ -1986,15 +2048,40 @@ const RenderFileUpload = (field) => {
                                     )
                                 </em>
                             </div>
-                            <aside>{thumbs}</aside>
+                            {/* <aside>{thumbs}</aside> */}
+                            {uploadCountMessage > 0 &&
+                                completedUploadFiles == false && (
+                                    <div className="govuk-body govuk-!-font-size-14">
+                                        Uploading {uploadCountMessage} files{" "}
+                                    </div>
+                                )}
+                            {completedUploadFiles > 0 && (
+                                <div className="govuk-body govuk-!-font-size-14">
+                                    {uploadCountMessage} files completed{" "}
+                                </div>
+                            )}
                         </section>
                     </>
                 )}
             </Dropzone>
+            {rejectedFiles.length > 0 && (
+                <div style={{ color: "red", marginTop: "10px" }}>
+                    <ul>
+                        {rejectedFiles.map((error, index) => (
+                            <li key={index}>{error}</li>
+                        ))}
+                    </ul>
+                </div>
+            )}
             {field.meta.touched && field.meta.error && (
                 <span className="error">{field.meta.error}</span>
             )}
-            {}
+            {filesList.length > 0 &&
+                (completedUploadFiles ? (
+                    "Done"
+                ) : (
+                    <p className="govuk-body textloading">Uploading</p>
+                ))}
             {files && Array.isArray(files) && (
                 <>
                     {/* {(files = removeEmptyObjects(files))} */}
@@ -2020,7 +2107,19 @@ const RenderFileUpload = (field) => {
                                         width="50"
                                     />
                                     <span className="govuk-body govuk-!-font-size-14 govuk-!-padding-left-5">
-                                        {file.name}( ({bytesToSize(file.size)})
+                                        {file.name} ({bytesToSize(file.size)}){" "}
+                                        <br />
+                                        <div id={file.name + "_" + i}>
+                                            {completedUploadFiles ? (
+                                                <p className="govuk-body govuk-!-font-size-14">
+                                                    Upload complete
+                                                </p>
+                                            ) : (
+                                                <p className="govuk-body textloading govuk-!-font-size-14">
+                                                    Uploading...
+                                                </p>
+                                            )}
+                                        </div>
                                     </span>
                                 </div>
                             )

components/newappeal/buildfield.js

@@ -214,6 +214,9 @@ export default function BuildField(props) {
                                 props.props.props.props.accountDetails
                                     .containerID
                             }
+                            uploadCount={props.uploadCount}
+                            setFileCount={props.props.setFileCount}
+                            setUploadCount={props.setUploadCount}
                         />
                     </div>
                 );

components/newappeal/buildrow.js

@@ -16,6 +16,11 @@ export default function BuildRow(props) {
         sectionCount,
         onSubmit,
         mandatoryFieldsData,
+        setUploadCount,
+        uploadCount,
+        setFileCount,
+        completedUploadFilesCount,
+        setCompletedUploadFilesCount,
     } = props;
 
     const parser = new DOMParser();
@@ -127,6 +132,9 @@ export default function BuildRow(props) {
                                 }
                                 mandatoryFieldsData={mandatoryFieldsData}
                                 documentTypeCode={documentTypeCode}
+                                setFileCount={setFileCount}
+                                setUploadCount={setUploadCount}
+                                uploadCount={uploadCount}
                             />
                         );
                     } else {

components/newappeal/buildsection.js

@@ -11,6 +11,7 @@ import {
     setDocumentsList,
     setFilesForAppeal,
     setNewAppealProgress,
+    setFileCount,
 } from "../../store/appealType/action";
 import { getFormCollectionByID, getProgressObj } from "../utils";
 import BuildRow from "./buildrow";
@@ -21,8 +22,14 @@ import BuildProgress from "./buildprogress";
 let BuildSection = (props) => {
     const [currentSectionSelected, setCurrentSectionSelected] = useState(1);
     const [pickupWhereLeftOff, setPickupWhereLeftOff] = useState(true);
-
     const [savingStatus, setSavingStatus] = useState(false);
+    const [allFilesUploaded, setAllFilesuploaded] = useState(false);
+    const [showCompletedUploadFiles, setShowCompletedUploadFiles] =
+        useState(false);
+    const [completedUploadFiles, setCompletedUploadFiles] = useState(false);
+    const [uploadCount, setUploadCount] = useState(0);
+    const [completedUploadFilesCount, setCompletedUploadFilesCount] =
+        useState(0);
 
     let { t } = useTranslation();
 
@@ -91,7 +98,7 @@ let BuildSection = (props) => {
 
     const handleParam = (setValue) => (e) => setValue(e.target.value);
 
-    const uploadAppealFiles = (values) => {
+    const uploadAppealFiles = async (values) => {
         // get filelists from values object
         let fileListObj = _.filter(values, function (v, key) {
             return _.includes(key, "pinswg_fileUpload");
@@ -110,14 +117,14 @@ let BuildSection = (props) => {
         //     _.includes(key, "pinswg_fileUpload") == true && delete dataObj[key];
         // }
 
-        uploadFiles(
+        await uploadFiles(
             dataObj,
             fileListObj,
             props.props.accountDetails.containerID,
             props.props.appealType.caseReference.ticketnumber
         ).then((data) => {
-            //console.log("hello", data);
+            console.log("hello", data);
-
+            setCompletedUploadFiles(true);
             return data;
         });
     };
@@ -166,122 +173,143 @@ let BuildSection = (props) => {
 
         setSavingStatus(useSaveStatus);
 
-        uploadAppealFiles(values);
+        setShowCompletedUploadFiles(true);
-        // console.log(
-        //     "\n////////////////////////\n appeal pdf payload",
-        //     values,
-        //     props.props.accountDetails.containerID,
-        //     props.appealType.caseReference.ticketnumber,
-        //     props.appealType,
-        //     "\n////////////////////////\n"
-        // );
 
-        // let pdfObj = values;
+        uploadAppealFiles(values)
+            .then((data) => {
+                // console.log(
+                //     "\n////////////////////////\n appeal pdf payload",
+                //     values,
+                //     props.props.accountDetails.containerID,
+                //     props.appealType.caseReference.ticketnumber,
+                //     props.appealType,
+                //     "\n////////////////////////\n"
+                // );
 
-        // Object.assign(pdfObj, {
+                // let pdfObj = values;
-        //     "containerID": props.props.accountDetails.containerID,
-        //     "casefolderID": props.appealType.caseReference.ticketnumber,
-        // });
 
-        // generateAppealPDF(
+                // Object.assign(pdfObj, {
-        //     pdfObj,
+                //     "containerID": props.props.accountDetails.containerID,
-        //     props.props.accountDetails.containerID,
+                //     "casefolderID": props.appealType.caseReference.ticketnumber,
-        //     props.appealType.caseReference.ticketnumber,
+                // });
-        //     router.query.appealtypes,
-        //     props.appealType.fileList
-        // ),
 
-        props.setNewAppealProgress(
+                // generateAppealPDF(
-            getProgressObj(formXML, titleList, mandatoryFieldsData, props)
+                //     pdfObj,
-        );
+                //     props.props.accountDetails.containerID,
+                //     props.appealType.caseReference.ticketnumber,
+                //     router.query.appealtypes,
+                //     props.appealType.fileList
+                // ),
 
-        let appTypeCollection = getFormCollectionByID(
+                props.setNewAppealProgress(
-            props.appealType.appealTypeID
+                    getProgressObj(
-        );
+                        formXML,
-        let updateBindAppealTypeToIncident =
+                        titleList,
-            appTypeCollection.NavigationProperty;
+                        mandatoryFieldsData,
+                        props
+                    )
+                );
 
-        Object.assign(updateBody, {
+                let appTypeCollection = getFormCollectionByID(
-            "pinswg_appealcasetype": props.appealType.appealTypeID,
+                    props.appealType.appealTypeID
-            "pinswg_Appellant@odata.bind":
+                );
-                "/contacts(" + props.props.accountDetails.loggedinUserId + ")",
+                let updateBindAppealTypeToIncident =
-            "pinswg_name": props.appealType.caseReference.ticketnumber,
+                    appTypeCollection.NavigationProperty;
-            [updateBindAppealTypeToIncident + "@odata.bind"]:
-                "/incidents(" + incidentId + ")",
-        });
 
-        updateBody = JSON.stringify(updateBody);
+                Object.assign(updateBody, {
-        updateBody = updateBody.replace(/:"Yes"/gm, `:true`);
+                    "pinswg_appealcasetype": props.appealType.appealTypeID,
-        updateBody = updateBody.replace(/:"No"/gm, `:false`);
+                    "pinswg_Appellant@odata.bind":
-        updateBody = JSON.parse(updateBody);
+                        "/contacts(" +
+                        props.props.accountDetails.loggedinUserId +
+                        ")",
+                    "pinswg_name": props.appealType.caseReference.ticketnumber,
+                    [updateBindAppealTypeToIncident + "@odata.bind"]:
+                        "/incidents(" + incidentId + ")",
+                });
 
-        Object.keys(updateBody).forEach((key) => {
+                updateBody = JSON.stringify(updateBody);
-            if (updateBody[key] === null) {
+                updateBody = updateBody.replace(/:"Yes"/gm, `:true`);
-                delete updateBody[key];
+                updateBody = updateBody.replace(/:"No"/gm, `:false`);
-            }
+                updateBody = JSON.parse(updateBody);
-            if (key.indexOf("_") == 0) {
-                delete updateBody[key];
-            }
-        });
 
-        //console.log(updateBody);
+                Object.keys(updateBody).forEach((key) => {
+                    if (updateBody[key] === null) {
+                        delete updateBody[key];
+                    }
+                    if (key.indexOf("_") == 0) {
+                        delete updateBody[key];
+                    }
+                });
 
-        let updateFormCollection = appTypeCollection.LogicalCollectionName;
+                //console.log(updateBody);
-        let primaryAttribute = appTypeCollection.PrimaryIdAttribute;
 
-        const reference = "PEDW-PARTIAL";
+                let updateFormCollection =
-        const templateId = "021b0a7b-df00-41f1-b94e-c269bee98c75";
+                    appTypeCollection.LogicalCollectionName;
-        const templateIdCY = "f3c4a56b-bfb8-4d39-97dd-888df3062b0a";
+                let primaryAttribute = appTypeCollection.PrimaryIdAttribute;
-        const emailAddress = props.props.accountDetails.loggedinUserEmail;
-        const personalisation = {
-            "caseReference": props.appealType.caseReference.ticketnumber,
-            "emailAddress": props.props.accountDetails.loggedinUserEmail,
-            "returnLink":
-                props.props.url +
-                (router.locale != "en" ? "/cy/fymhorth/" : "/myportal/") +
-                appTypeCollection.UrlName +
-                "?lpa=" +
-                props.appealType.appealLPA +
-                "&apt=" +
-                appTypeCollection.appealTypeID +
-                "&casereference=" +
-                props.appealType.caseReference.ticketnumber +
-                "&inid=" +
-                props.appealType.caseReference.incidentid,
-            "linkExpiry": 10 * 60,
-        };
 
-        // console.log(
+                const reference = "PEDW-PARTIAL";
-        //     "/////////////////////////////////",
+                const templateId = "021b0a7b-df00-41f1-b94e-c269bee98c75";
-        //     "returnLink:",
+                const templateIdCY = "f3c4a56b-bfb8-4d39-97dd-888df3062b0a";
-        //     props.props.url +
+                const emailAddress =
-        //         (router.locale != "en" ? "/cy/fymhorth/" : "/myportal/") +
+                    props.props.accountDetails.loggedinUserEmail;
-        //         appTypeCollection.UrlName +
+                const personalisation = {
-        //         "?lpa=" +
+                    "caseReference":
-        //         props.appealType.appealLPA +
+                        props.appealType.caseReference.ticketnumber,
-        //         "&apt=" +
+                    "emailAddress":
-        //         appTypeCollection.appealTypeID +
+                        props.props.accountDetails.loggedinUserEmail,
-        //         "&casereference=" +
+                    "returnLink":
-        //         props.appealType.caseReference.ticketnumber +
+                        props.props.url +
-        //         "&inid=" +
+                        (router.locale != "en"
-        //         props.appealType.caseReference.incidentid,
+                            ? "/cy/fymhorth/"
-        //     "/////////////////////////////////"
+                            : "/myportal/") +
-        // );
+                        appTypeCollection.UrlName +
+                        "?lpa=" +
+                        props.appealType.appealLPA +
+                        "&apt=" +
+                        appTypeCollection.appealTypeID +
+                        "&casereference=" +
+                        props.appealType.caseReference.ticketnumber +
+                        "&inid=" +
+                        props.appealType.caseReference.incidentid,
+                    "linkExpiry": 10 * 60,
+                };
 
-        sendSavedEmail == true &&
+                // console.log(
-            sendEmail(
+                //     "/////////////////////////////////",
-                router.locale != "en" ? templateIdCY : templateId,
+                //     "returnLink:",
-                emailAddress,
+                //     props.props.url +
-                personalisation,
+                //         (router.locale != "en" ? "/cy/fymhorth/" : "/myportal/") +
-                reference
+                //         appTypeCollection.UrlName +
-            );
+                //         "?lpa=" +
+                //         props.appealType.appealLPA +
+                //         "&apt=" +
+                //         appTypeCollection.appealTypeID +
+                //         "&casereference=" +
+                //         props.appealType.caseReference.ticketnumber +
+                //         "&inid=" +
+                //         props.appealType.caseReference.incidentid,
+                //     "/////////////////////////////////"
+                // );
+            })
+            .then(() => {
+                sendSavedEmail == true &&
+                    sendEmail(
+                        router.locale != "en" ? templateIdCY : templateId,
+                        emailAddress,
+                        personalisation,
+                        reference
+                    );
 
-        useSaveStatus &&
+                useSaveStatus &&
-            router.replace(
+                    router.replace(
-                router.locale != "en"
+                        router.locale != "en"
-                    ? "/" + router.locale + "/myportal"
+                            ? "/" + router.locale + "/myportal"
-                    : "/myportal"
+                            : "/myportal"
-            );
+                    );
+            })
+            .then(() => {
+                setCompletedUploadFiles(true);
+            });
     };
 
     const onHandleSubmit = (values) => {
@@ -335,9 +363,11 @@ let BuildSection = (props) => {
 
         delete valuesObj["_pinswg_appellant_value"];
         //console.log("has errors:", props.invalid);
-        props.invalid == false && updateCaseProgress(valuesObj, false, false);
+        props.invalid == false &&
-
+            updateCaseProgress(valuesObj, false, false).then((data) => {
-        setCurrentSection(currentSection + 1);
+                console.log(data);
+                setCurrentSection(currentSection + 1);
+            });
     };
 
     const [hasErrors, setHasErrors] = useState("");
@@ -406,6 +436,16 @@ let BuildSection = (props) => {
         );
     };
 
+    const hasUploadFiles = () => {
+        const formArr = props.props.form["appealForm"].values;
+        const prefix = "pinswg_fileUpload";
+        const hasFiles = Object.keys(formArr).some((key) =>
+            key.startsWith(prefix)
+        );
+
+        return hasFiles;
+    };
+
     return (
         <div className="govuk-grid-row">
             <div className="govuk-grid-column-two-thirds wgForm ">
@@ -429,6 +469,15 @@ let BuildSection = (props) => {
                         onSubmit={onSubmit}
                         mandatoryFieldsData={mandatoryFieldsData}
                         props={props}
+                        allFilesUploaded={allFilesUploaded}
+                        setAllFilesuploaded={setAllFilesuploaded}
+                        setFileCount={setFileCount}
+                        setUploadCount={setUploadCount}
+                        uploadCount={uploadCount}
+                        completedUploadFilesCount={completedUploadFilesCount}
+                        setCompletedUploadFilesCount={
+                            setCompletedUploadFilesCount
+                        }
                     />
 
                     <div className="govuk-button-group">
@@ -523,13 +572,18 @@ let BuildSection = (props) => {
                         )}
                         {props.sectionCount == currentSection ? (
                             <>
+                                <div>
+                                    {showCompletedUploadFiles
+                                        ? "UPlodeding, pleas ewait "
+                                        : ""}
+                                </div>
                                 <button
                                     disabled={!isProgressComplete(progObj)}
                                     type="submit"
                                     className="govuk-button"
                                     data-module="govuk-button"
                                 >
-                                    {t("common:submit-button")}
+                                    {t("common:submit-button")}{" "}
                                 </button>
                                 {savingStatus ? (
                                     <span className=" progress-save-active">
@@ -655,6 +709,9 @@ const mapDispatchToProps = (dispatch) => {
         setNewAppealProgress: (progressObj) => {
             dispatch(setNewAppealProgress(progressObj));
         },
+        setFileCount: (fileCount) => {
+            dispatch(setFileCount(fileCount));
+        },
     };
 };
 

pages/api/file/upload.js

@@ -32,18 +32,26 @@ ApiProxy.post(async (req, res) => {
     //createContainer(containerID).then((containerName) => {
 
     console.log("does this get folder name:", containerID, casefolderID);
+
     repOrAppeal
         ? createRepBlob(appealData, containerID, casefolderID).then((data) => {
               Object.keys(req.files).length > 0 &&
-                  uploadFile(req.files, containerID, casefolderID);
+                  uploadFile(req.files, containerID, casefolderID).then(
+                      (data) => {
+                          return res.status(200).json({ data });
+                      }
+                  );
           })
         : createBlob(appealData, containerID, casefolderID).then((data) => {
               Object.keys(req.files).length > 0 &&
-                  uploadFile(req.files, containerID, casefolderID);
+                  uploadFile(req.files, containerID, casefolderID).then(
+                      (data) => {
+                          return res.status(200).json({ data });
+                      }
+                  );
           });
     //});
 
-    return res.status(200).json({ data: "success" });
     // } else {
     //     return res.status(400).json();
     // }

store/appealType/action.js

@@ -11,6 +11,7 @@ export const appealTypeDataActionTypes = {
     SETDOCUMENTLIST: "SETDOCUMENTLIST",
     SETFILELIST: "SETFILELIST",
     SETNEWAPPEALPROGRESS: "SETNEWAPPEALPROGRESS",
+    SETFILECOUNT: "SETFILECOUNT",
 };
 
 export const getAppealTypeObj = () => (dispatch) => {
@@ -86,3 +87,10 @@ export const setNewAppealProgress = (progress) => (dispatch) => {
         progress: progress,
     });
 };
+
+export const setFileCount = (fileCount) => (dispatch) => {
+    return dispatch({
+        type: appealTypeDataActionTypes.SETFILECOUNT,
+        fileCount: fileCount,
+    });
+};

store/appealType/reducer.js

@@ -10,6 +10,7 @@ const appealTypeDataInitialState = {
     formComplete: "false",
     documentList: {},
     fileList: [],
+    fileCount: 0,
     progress: [],
 };
 
@@ -60,6 +61,11 @@ export default function reducer(state = appealTypeDataInitialState, action) {
                 ...state,
                 fileList: action.fileList,
             };
+        case appealTypeDataActionTypes.SETFILECOUNT:
+            return {
+                ...state,
+                fileCount: action.fileCount,
+            };
         case appealTypeDataActionTypes.SETNEWAPPEALPROGRESS:
             return {
                 ...state,

styles/sass/welshgov/_application.scss

@@ -2437,7 +2437,7 @@ ul#sharePageLinks.active {
     &.watched_link {
         color: $black !important;
         background-color: $white;
-        width: 10px;
+        width: 24px;
         display: block;
 
         .eye {