From ef9955790240272bf9dce420c565a639446b6bdc Mon Sep 17 00:00:00 2001
From: Matthew White <matthew-white@users.noreply.github.com>
Date: Mon, 11 Mar 2024 14:09:31 -0400
Subject: [PATCH] Fix bug where upload progress was not shown in
 FormAttachmentPopups

Closes getodk/central#606.
---
 src/components/form-attachment/list.vue   | 14 +++++++-------
 src/components/form-attachment/popups.vue |  6 +-----
 2 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/src/components/form-attachment/list.vue b/src/components/form-attachment/list.vue
index d94eb143a..69c55d17f 100644
--- a/src/components/form-attachment/list.vue
+++ b/src/components/form-attachment/list.vue
@@ -78,7 +78,6 @@ except according to the terms contained in the LICENSE file.
 
 <script>
 import { any } from 'ramda';
-import { markRaw } from 'vue';
 
 import DocLink from '../doc-link.vue';
 import FileDropZone from '../file-drop-zone.vue';
@@ -147,7 +146,8 @@ export default {
              - total. The total number of files to upload.
              - remaining. The number of files that have not been uploaded yet.
              - current. The name of the file currently being uploaded.
-             - progress. The latest ProgressEvent for the current upload.
+             - progress. The upload progress for the current upload as a
+               fraction.
         4. Properties set once the uploads have finished or stopped and reset
            once a new drag is started or another file input selection is made
            - updatedAttachments. A Set of the names of the attachments for which
@@ -161,7 +161,7 @@ export default {
         total: 0,
         remaining: 0,
         current: null,
-        progress: null
+        progress: 0
       },
       updatedAttachments: new Set(),
       // Modals
@@ -286,7 +286,7 @@ export default {
       // sync.
       this.uploadStatus.remaining -= 1;
       this.uploadStatus.current = file.name;
-      this.uploadStatus.progress = null;
+      this.uploadStatus.progress = 0;
 
       return this.request({
         method: 'POST',
@@ -300,8 +300,8 @@ export default {
           'Content-Encoding': 'identity'
         },
         data: file,
-        onUploadProgress: (progressEvent) => {
-          this.uploadStatus.progress = markRaw(progressEvent);
+        onUploadProgress: (event) => {
+          this.uploadStatus.progress = event.progress ?? 0;
         },
         problemToAlert: (problem) => {
           const { total } = this.uploadStatus;
@@ -356,7 +356,7 @@ export default {
               this.updatedAttachments.add(name);
             }
           });
-          this.uploadStatus = { total: 0, remaining: 0, current: null, progress: null };
+          this.uploadStatus = { total: 0, remaining: 0, current: null, progress: 0 };
         });
       this.plannedUploads = [];
       this.unmatchedFiles = [];
diff --git a/src/components/form-attachment/popups.vue b/src/components/form-attachment/popups.vue
index 65a6bffa2..5fa95c095 100644
--- a/src/components/form-attachment/popups.vue
+++ b/src/components/form-attachment/popups.vue
@@ -146,11 +146,7 @@ export default {
         this.shownDuringUpload;
     },
     percentUploaded() {
-      const { progress } = this.uploadStatus;
-      const fraction = progress != null && progress.lengthComputable
-        ? progress.loaded / progress.total
-        : 0;
-      return this.$n(fraction, 'percent');
+      return this.$n(this.uploadStatus.progress, 'percent');
     }
   },
   updated() {