batch uploads on frontend

2026-04-02 16:09:56 +01:00
parent da7e694120
commit c754e04034
4 changed files with 212 additions and 21 deletions
@@ -2147,6 +2147,7 @@ const RenderFileUpload = (field) => {

    const [completedUploadFiles, setCompletedUploadFiles] = useState(false);
    const [uploadCountMessage, setUploadCountMessage] = useState("");
+    const [totalUploadFiles, setTotalUploadFiles] = useState(0);

    const handleDropRejected = (fileRejections) => {
        const errors = fileRejections
@@ -2254,6 +2255,7 @@ const RenderFileUpload = (field) => {
                    if (!acceptedFiles || acceptedFiles.length === 0) {
                        setCompletedUploadFiles(true); // optional: depends on your UX
                        setUploadCountMessage(0);
+                        setTotalUploadFiles(0);
                        return;
                    }

@@ -2280,12 +2282,18 @@ const RenderFileUpload = (field) => {
                        );
                    }

-                    setUploadCountMessage(renamedAcceptedFiles.length);
+                    setUploadCountMessage(0);
+                    setTotalUploadFiles(renamedAcceptedFiles.length);

                    uploadSingleFile(
                        renamedAcceptedFiles,
                        field.containerID,
-                        field.ticketnumber
+                        field.ticketnumber,
+                        {
+                            onChunkComplete: ({ cumulativeUploaded }) => {
+                                setUploadCountMessage(cumulativeUploaded);
+                            }
+                        }
                    )
                        .then((data) => {
                            let buildAppealFilesArray = [];
@@ -2386,10 +2394,13 @@ const RenderFileUpload = (field) => {
                    </ul>
                </div>
            )}
-            {uploadCountMessage > 0 && completedUploadFiles == false && (
+            {totalUploadFiles > 0 && completedUploadFiles == false && (
                <div className="govuk-body govuk-!-font-size-14">
                    {t("home:uploading-files-label", {
-                        number: uploadCountMessage
+                        number:
+                            totalUploadFiles > 0
+                                ? `${uploadCountMessage} of ${totalUploadFiles}`
+                                : uploadCountMessage
                    })}
                </div>
            )}