From 7634992946eb18755d3eed5d88f3dcedb93096dd Mon Sep 17 00:00:00 2001
From: Alex Yong <alexjyong@gmail.com>
Date: Thu, 11 Apr 2024 19:32:33 +0000
Subject: [PATCH] Adding the ability to track file upload percentage and
 currently uploaded/total upload

---
 frontend/src/components/prompts/UploadFiles.vue |  4 ++++
 frontend/src/stores/upload.ts                   | 10 ++++++++++
 2 files changed, 14 insertions(+)

diff --git a/frontend/src/components/prompts/UploadFiles.vue b/frontend/src/components/prompts/UploadFiles.vue
index d3a96bc5..288d3fc9 100644
--- a/frontend/src/components/prompts/UploadFiles.vue
+++ b/frontend/src/components/prompts/UploadFiles.vue
@@ -10,6 +10,8 @@
         <div class="upload-info">
           <div class="upload-speed">{{ uploadSpeed.toFixed(2) }} MB/s</div>
           <div class="upload-eta">{{ formattedETA }} remaining</div>
+          <div class="upload-percentage"> {{ getProgress }} % Completed </div>
+          <div class="upload-fraction"> / {{ getTotalSize }} </div>
         </div>
         <button
           class="action"
@@ -72,6 +74,8 @@ export default {
       "filesInUploadCount",
       "uploadSpeed",
       "getETA",
+      "getProgress",
+      "getTotalSize"
     ]),
     ...mapWritableState(useFileStore, ["reload"]),
     ...mapActions(useUploadStore, ["reset"]),
diff --git a/frontend/src/stores/upload.ts b/frontend/src/stores/upload.ts
index 7a7686a6..0c1e1cd8 100644
--- a/frontend/src/stores/upload.ts
+++ b/frontend/src/stores/upload.ts
@@ -47,6 +47,16 @@ export const useUploadStore = defineStore("upload", {
       const sum = state.progress.reduce((acc, val) => +acc + +val) as number;
       return Math.ceil((sum / totalSize) * 100);
     },
+    getTotalSize: (state) => {
+      if (state.sizes.length === 0) {
+        return '0 Bytes';
+      }
+    
+      const totalSize = state.sizes.reduce((a, b) => a + b, 0);
+      const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+      const i = Math.floor(Math.log(totalSize) / Math.log(1024));
+      return parseFloat((totalSize / Math.pow(1024, i)).toFixed(2)) + ' ' + sizes[i];
+    },    
     filesInUploadCount: (state) => {
       return Object.keys(state.uploads).length + state.queue.length;
     },