Bugfix - Ensure all file uploads correctly marked as complete when multiple files are uploaded in parallel

When multiple files are uploaded in parallel in a client-side file upload component, we were witnessing weird behaviour, whereby only the topmost file would have its status changed from 'In progress' to 'Complete' after virus scanning. This was only happening in deployed environments, not locally. Checking S3 revealed that files were being successfully uploaded in the backend.

The issue was that when we change the progress bar to the text 'In progress' after file upload is complete but BEFORE the virus scan is successful, we lose the '.dz-progress-bar' class, and fallback to the code that looks for the '[data-dz-uploadprogress]' attribute. But because we use 'document.querySelector', we look globally, meaning the element we get back is the first element with that attribute, i.e., the element reading 'In progress' or 'Complete' for the topmost file. So we always update this element, meaning the rest stay as 'In progress'. By making the 'querySelector' specific to the file, we eliminate this issue.

The reason it never failed locally was because we always returned an array of tags immediately as a mocked response, and so we never changed the progress bar to 'In progress' text, and so we never hit the dodgy fallback code.

Author: wjrm500

runner/src/server/plugins/engine/views/components/clientsidefileuploadfield.html

@@ -407,7 +407,7 @@ <h2 class="govuk-error-summary__title" id="error-summary-title">
         const updateProgressBarContent = (file, text) => {
             let tableFileUploadStatusIndicatorArea = file.previewElement.querySelector('.dz-progress-bar');
             if (!tableFileUploadStatusIndicatorArea) {
-                tableFileUploadStatusIndicatorArea = document.querySelector('[data-dz-uploadprogress]');
+                tableFileUploadStatusIndicatorArea = file.previewElement.querySelector('[data-dz-uploadprogress]');
                 if (tableFileUploadStatusIndicatorArea !== null) {
                     tableFileUploadStatusIndicatorArea.textContent = text;
                 }