Display upload progress as file size / total file size during uploads

frontend/src/api/tus.js

@@ -28,6 +28,8 @@ export async function upload(
   let resourcePath = `${tusEndpoint}${filePath}?override=${overwrite}`;
 
   await createUpload(resourcePath);
+  let uploadSize = content.size || 0; // Get the size of the content being uploaded
+  store.commit('setTotalFileSize', store.state.upload.totalFileSize + uploadSize);
 
   return new Promise((resolve, reject) => {
     let upload = new tus.Upload(content, {
@@ -182,6 +184,12 @@ function calcProgress(filePath) {
   store.commit("setETA", eta);
   store.commit("setUploadPercentage", uploadPercentage);
 
+  let totalUploaded = 0;
+  for (let file in CURRENT_UPLOAD_LIST) {
+    totalUploaded += CURRENT_UPLOAD_LIST[file].currentBytesUploaded;
+  }
+  store.commit('setTotalUploadedSize', totalUploaded);
+
   fileData.initialBytesUploaded = fileData.currentBytesUploaded;
   fileData.lastProgressTimestamp = Date.now();
 }

frontend/src/components/prompts/UploadFiles.vue

@@ -11,6 +11,10 @@
           <div class="upload-speed">{{ uploadSpeed.toFixed(2) }} MB/s</div>
           <div class="upload-eta">{{ formattedETA }} remaining</div>
           <div class="upload-percentage">{{ uploadPercentage.toFixed(2) }}%</div>
+          <div class="upload-size">
+            {{ formatFileSize(totalUploadedSize) }} /
+            {{ formatFileSize(totalFileSize) }}
+          </div>
         </div>
         <button
           class="action"
@@ -71,7 +75,9 @@ export default {
       "filesInUploadCount",
       "uploadSpeed",
       "eta",
-      "uploadPercentage"
+      "uploadPercentage",
+      "totalUploadedSize",
+      "totalFileSize",
     ]),
     ...mapMutations(["resetUpload"]),
     formattedETA() {
@@ -103,6 +109,17 @@ export default {
         this.$store.commit("setReload", true);
       }
     },
+    formatFileSize(size) {
+      if (size < 1024) {
+        return size + ' B';
+      } else if (size < 1024 * 1024) {
+        return (size / 1024).toFixed(2) + ' KB';
+      } else if (size < 1024 * 1024 * 1024) {
+        return (size / 1024 / 1024).toFixed(2) + ' MB';
+      } else {
+        return (size / 1024 / 1024 / 1024).toFixed(2) + ' GB';
+      }
+    },
   },
 };
 </script>

frontend/src/store/getters.js

@@ -51,7 +51,9 @@ const getters = {
   },
   uploadSpeed: (state) => state.upload.speedMbyte,
   eta: (state) => state.upload.eta,
-  uploadPercentage: (state) => state.upload.uploadPercentage
+  uploadPercentage: (state) => state.upload.uploadPercentage,
+  totalUploadedSize: (state) => state.upload.totalUploadedSize,
+  totalFileSize: (state) => state.upload.totalFileSize
 };
 
 export default getters;

frontend/src/store/modules/upload.js

@@ -13,7 +13,9 @@ const state = {
   uploads: {},
   speedMbyte: 0,
   eta: 0,
-  uploadPercentage: 0
+  uploadPercentage: 0,
+  totalFileSize: 0,
+  totalUploadedSize: 0
 };
 
 const mutations = {

frontend/src/store/mutations.js

@@ -107,6 +107,12 @@ const mutations = {
   setUploadPercentage(state, value) {
     state.upload.uploadPercentage = value;
   },
+  setTotalUploadedSize(state, value) {
+    state.upload.totalUploadedSize = value;
+  },
+  setTotalFileSize(state, value) {
+    state.upload.totalFileSize = value;
+  },
   resetUpload(state) {
     state.upload.uploads = {};
     state.upload.queue = [];
@@ -116,6 +122,8 @@ const mutations = {
     state.upload.speedMbyte = 0;
     state.upload.eta = 0;
     state.upload.uploadPercentage = 0;
+    state.upload.totalFileSize = 0;
+    state.upload.totalUploadedSize = 0;
   },
 };