robbond/pedwfrontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged PR 2227: batch uploads on frontend

Browse Source 
batch uploads on frontend

Related work items: #22422
This commit is contained in:
Robert Bond
2026-04-02 15:11:05 +00:00
parent da7e694120 c754e04034
commit 02512ec403
4 changed files with 212 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
actions/services/documentDirectService.js
+63 -13
View File
@@ -14,6 +14,8 @@ import {
postSignedFileJson
} from "../clients/fileClient";
const MAX_FILES_PER_UPLOAD_BATCH = 10;
export const getAwaitingSubmissionFromBlob = (containerName) => {
const route = buildFileQuery("/api/file/getawaitingsubmissionfromblob", {
container: containerName
@@ -130,21 +132,69 @@ export const uploadFiles = async (
}
};
export const uploadSingleFile = async (filesObj, containerID, casefolderID) => {
export const uploadSingleFile = async (
filesObj,
containerID,
casefolderID,
options = {}
) => {
let files = filesObj;
var formData = new FormData();
formData.append("containerID", containerID);
formData.append("casefolderID", casefolderID);
for (let i = 0; i < files.length; i++) {
formData.append(files[i].name, files[i]);
}
var queryUrl = "/api/file/uploadsinglefile";
try {
return await postSignedFileJson(queryUrl, formData);
const queryUrl = "/api/file/uploadsinglefile";
const uploadResponse = {
data: [],
invalidFiles: []
};
let cumulativeUploaded = 0;
let cumulativeInvalid = 0;
const totalFiles = files.length;
const totalChunks = Math.ceil(totalFiles / MAX_FILES_PER_UPLOAD_BATCH);
for (
let index = 0;
index < files.length;
index += MAX_FILES_PER_UPLOAD_BATCH
) {
const chunkIndex =
Math.floor(index / MAX_FILES_PER_UPLOAD_BATCH) + 1;
const fileChunk = files.slice(
index,
index + MAX_FILES_PER_UPLOAD_BATCH
);
const formData = new FormData();
formData.append("containerID", containerID);
formData.append("casefolderID", casefolderID);
for (let i = 0; i < fileChunk.length; i++) {
formData.append(fileChunk[i].name, fileChunk[i]);
}
const chunkResult = await postSignedFileJson(queryUrl, formData);
if (Array.isArray(chunkResult?.data)) {
uploadResponse.data.push(...chunkResult.data);
cumulativeUploaded += chunkResult.data.length;
}
if (Array.isArray(chunkResult?.invalidFiles)) {
uploadResponse.invalidFiles.push(...chunkResult.invalidFiles);
cumulativeInvalid += chunkResult.invalidFiles.length;
}
if (typeof options.onChunkComplete === "function") {
options.onChunkComplete({
chunkIndex,
totalChunks,
totalFiles,
cumulativeUploaded,
cumulativeInvalid,
processedFiles: cumulativeUploaded + cumulativeInvalid
});
}
}
return uploadResponse;
} catch (error) {
consoleLogger(error);
}
components/case/representation/representationElements.js
+15 -4
View File
@@ -1061,6 +1061,7 @@ export const RenderFileUpload = (field) => {
const [completedUploadFiles, setCompletedUploadFiles] = useState(false);
const [uploadCountMessage, setUploadCountMessage] = useState("");
const [totalUploadFiles, setTotalUploadFiles] = useState(0);
const handleDropRejected = (fileRejections) => {
const errors = fileRejections
@@ -1169,6 +1170,7 @@ export const RenderFileUpload = (field) => {
if (!acceptedFiles || acceptedFiles.length === 0) {
setCompletedUploadFiles(true); // optional: depends on your UX
setUploadCountMessage(0);
setTotalUploadFiles(0);
return;
}
@@ -1206,7 +1208,8 @@ export const RenderFileUpload = (field) => {
);
}
setUploadCountMessage(renamedAcceptedFiles.length);
setUploadCountMessage(0);
setTotalUploadFiles(renamedAcceptedFiles.length);
uploadSingleFile(
renamedAcceptedFiles,
@@ -1214,7 +1217,12 @@ export const RenderFileUpload = (field) => {
field.ticketnumber +
"/" +
field.filenamePrefix.representationForm.values
.repfile_name
.repfile_name,
{
onChunkComplete: ({ cumulativeUploaded }) => {
setUploadCountMessage(cumulativeUploaded);
}
}
).then((data) => {
console.log(data);
let buildAppealFilesArray = [];
@@ -1324,10 +1332,13 @@ export 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>
)}
components/elements/index.js
+15 -4
View File
@@ -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>
)}
memory-bank/change-log.md
+119
View File
@@ -3194,3 +3194,122 @@ Validation:
Follow-ups:
- Optional next bounded slice: stop or switch scope; touched-function micro-tidies in this area are now largely exhausted.
---
### CL-090: uploadsinglefile API batch upload chunking (10 files per pass)
date: 2026-04-02
author: Cline
scope: `pages/api/file/uploadsinglefile.js`
type: change
rationale: Prevent oversized single-pass uploads by splitting validated files into bounded batches and invoking existing upload logic per batch.
impact: Upload flow now processes validated files in deterministic chunks of 10 while preserving existing hash guards, validation behavior, and response contract (`data`, `invalidFiles`).
status: completed
Summary:
- Added `MAX_FILES_PER_UPLOAD_BATCH = 10` in `uploadsinglefile` API route.
- Replaced single `uploadSingleFile(...)` invocation with chunked processing:
- converts allowed files object to entries
- slices into batches of 10
- awaits `uploadSingleFile(...)` once per batch
- aggregates batch results into one `data` array for response
- Kept existing error handling unchanged (`UPLOAD_SINGLE_FILE_FAILED` on catch).
Validation:
- `npx eslint pages/api/file/uploadsinglefile.js` -> executed with no lint output.
Follow-ups:
- Optional: add a focused API contract/unit test to assert that 11+ files cause multiple `uploadSingleFile` invocations with max chunk size 10.
---
### CL-091: uploadsinglefile client-side batch upload chunking parity (10 files per pass)
date: 2026-04-02
author: Cline
scope: `actions/services/documentDirectService.js`
type: change
rationale: Ensure client upload flow aligns with server batching requirement by splitting outbound `uploadsinglefile` requests into chunks of 10 files.
impact: Client now sends multiple sequential API requests (max 10 files each) and merges per-chunk responses into one contract-compatible payload (`data`, `invalidFiles`) for existing UI handlers.
status: completed
Summary:
- Added `MAX_FILES_PER_UPLOAD_BATCH = 10` to document direct service.
- Updated `uploadSingleFile(filesObj, containerID, casefolderID)` to:
- split selected files into batches of 10
- create a fresh `FormData` per batch
- call `/api/file/uploadsinglefile` once per batch (sequential `await`)
- aggregate `data` and `invalidFiles` from all chunk responses
- Preserved function return shape used by current upload UIs.
Validation:
- `npx eslint pages/api/file/uploadsinglefile.js actions/services/documentDirectService.js` -> executed with no lint output.
Follow-ups:
- Optional: add a focused service-behaviour test that verifies `uploadSingleFile` issues N requests for N/10 chunks and merges all chunk responses.
---
### CL-092: per-chunk upload UI progress updates (new appeal + representations)
date: 2026-04-02
author: Cline
scope: `actions/services/documentDirectService.js`, `components/elements/index.js`, `components/case/representation/representationElements.js`
type: change
rationale: Update UX so upload progress reflects completed chunks incrementally instead of waiting for all chunk requests to finish.
impact: Upload status message now updates after each chunk completes, showing users progressive completion for large multi-file uploads while preserving existing response/error contracts.
status: completed
Summary:
- Extended `uploadSingleFile(...)` service signature with optional callback support:
- new `options` argument
- invokes `options.onChunkComplete(...)` after each chunk upload
- emits cumulative counters (`cumulativeUploaded`, `cumulativeInvalid`, `processedFiles`, chunk index metadata)
- Wired per-chunk UI progress updates in both upload entry points:
- `components/elements/index.js`
- `components/case/representation/representationElements.js`
- Both now pass `onChunkComplete` and update `uploadCountMessage` from cumulative uploaded count as each chunk finishes.
Validation:
- `npx eslint pages/api/file/uploadsinglefile.js actions/services/documentDirectService.js components/elements/index.js components/case/representation/representationElements.js` -> executed with no lint output.
Follow-ups:
- Optional: add a focused UI behaviour test to assert upload progress increments per completed chunk for >10 file uploads.
---
### CL-093: upload progress message format `X of Y` during chunked uploads
date: 2026-04-02
author: Cline
scope: `components/elements/index.js`, `components/case/representation/representationElements.js`
type: change
rationale: User requested clearer in-progress feedback showing uploaded count relative to total files (e.g. `10 of 30`) during chunked uploads.
impact: Upload UI now shows progressive message in `X of Y` format while upload is in flight, improving clarity for large batch uploads.
status: completed
Summary:
- Added `totalUploadFiles` state in both upload UIs (new appeal + representations).
- In-progress upload message now renders as:
- `${uploadCountMessage} of ${totalUploadFiles}`
- Upload start now initializes as `0 of Y` and updates after each completed chunk callback.
- Empty-drop/reset path clears both counters to avoid stale totals.
Validation:
- `npx eslint actions/services/documentDirectService.js components/elements/index.js components/case/representation/representationElements.js` -> executed with no lint output.
Follow-ups:
- Optional: localize a dedicated `upload-progress-x-of-y` translation key if copy needs stronger grammatical control per locale.