move progress calc to modal

frontend/src/components/prompts/UploadFiles.vue

@@ -14,12 +14,10 @@
         <div class="upload-info">
           <div class="upload-speed">{{ speed.toFixed(2) }} MB/s</div>
           <div class="upload-eta">{{ formattedETA }} remaining</div>
-          <div class="upload-percentage">
+          <div class="upload-percentage">{{ sentPercent }}% Completed</div>
-            {{ uploadStore.getProgressDecimal }}% Completed
-          </div>
           <div class="upload-fraction">
-            {{ uploadStore.getTotalProgressBytes }} /
+            {{ sentMbytes }} /
-            {{ uploadStore.getTotalSize }}
+            {{ totalMbytes }}
           </div>
         </div>
         <button
@@ -75,6 +73,7 @@ import { computed, ref, watch } from "vue";
 import { abortAllUploads } from "@/api/tus";
 import buttons from "@/utils/buttons";
 import { useI18n } from "vue-i18n";
+import { partial } from "filesize";
 
 const { t } = useI18n({});
 
@@ -87,6 +86,16 @@ const uploadStore = useUploadStore();
 
 const { sentBytes } = storeToRefs(uploadStore);
 
+const byteToMbyte = partial({ exponent: 2 });
+
+const sentPercent = computed(() =>
+  ((uploadStore.sentBytes / uploadStore.totalBytes) * 100).toFixed(2)
+);
+
+const sentMbytes = computed(() => byteToMbyte(uploadStore.sentBytes));
+
+const totalMbytes = computed(() => byteToMbyte(uploadStore.totalBytes));
+
 let lastSpeedUpdate: number = 0;
 const recentSpeeds: number[] = [];
 

frontend/src/stores/upload.ts

@@ -3,7 +3,7 @@ import { useFileStore } from "./file";
 import { files as api } from "@/api";
 import { throttle } from "lodash-es";
 import buttons from "@/utils/buttons";
-import { computed, inject, ref } from "vue";
+import { inject, ref } from "vue";
 
 // TODO: make this into a user setting
 const UPLOADS_LIMIT = 5;
@@ -14,18 +14,6 @@ const beforeUnload = (event: Event) => {
   // event.returnValue = "";
 };
 
-// Utility function to format bytes into a readable string
-function formatSize(bytes: number): string {
-  if (bytes === 0) return "0.00 Bytes";
-
-  const k = 1024;
-  const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
-
-  // Return the rounded size with two decimal places
-  return (bytes / k ** i).toFixed(2) + " " + sizes[i];
-}
-
 export const useUploadStore = defineStore("upload", () => {
   const $showError = inject<IToastError>("$showError")!;
 
@@ -39,26 +27,6 @@ export const useUploadStore = defineStore("upload", () => {
   const totalBytes = ref<number>(0);
   const sentBytes = ref<number>(0);
 
-  //
-  // GETTERS
-  //
-
-  const getProgress = computed(() => {
-    return Math.ceil((sentBytes.value / totalBytes.value) * 100);
-  });
-
-  const getProgressDecimal = computed(() => {
-    return ((sentBytes.value / totalBytes.value) * 100).toFixed(2);
-  });
-
-  const getTotalProgressBytes = computed(() => {
-    return formatSize(sentBytes.value);
-  });
-
-  const getTotalSize = computed(() => {
-    return formatSize(totalBytes.value);
-  });
-
   //
   // ACTIONS
   //
@@ -166,12 +134,6 @@ export const useUploadStore = defineStore("upload", () => {
     totalBytes,
     sentBytes,
 
-    // GETTERS
-    getProgress,
-    getProgressDecimal,
-    getTotalProgressBytes,
-    getTotalSize,
-
     // ACTIONS
     reset,
     upload,