feat: add upload file list with progress (#1825)

frontend/src/store/getters.js

@@ -8,8 +8,36 @@ const getters = {
       return 0;
     }
 
+    let totalSize = state.upload.sizes.reduce((a, b) => a + b, 0);
+
     let sum = state.upload.progress.reduce((acc, val) => acc + val);
-    return Math.ceil((sum / state.upload.size) * 100);
+    return Math.ceil((sum / totalSize) * 100);
+  },
+  filesInUploadCount: (state) => {
+    let total =
+      Object.keys(state.upload.uploads).length + state.upload.queue.length;
+    return total;
+  },
+  filesInUpload: (state) => {
+    let files = [];
+
+    for (let index in state.upload.uploads) {
+      let upload = state.upload.uploads[index];
+      let id = upload.id;
+      let type = upload.type;
+      let name = decodeURIComponent(upload.path.replace(/^.*[\\/]/, ""));
+      let progress = state.upload.progress[id];
+      let size = state.upload.sizes[id];
+
+      files.push({
+        id,
+        name,
+        progress: Math.ceil((progress / size) * 100),
+        type,
+      });
+    }
+
+    return files.sort((a, b) => a.progress - b.progress);
   },
 };
 

frontend/src/store/modules/upload.js

@@ -7,7 +7,7 @@ const UPLOADS_LIMIT = 5;
 
 const state = {
   id: 0,
-  size: 0,
+  sizes: [],
   progress: [],
   queue: [],
   uploads: {},
@@ -19,12 +19,12 @@ const mutations = {
   },
   reset: (state) => {
     state.id = 0;
-    state.size = 0;
+    state.sizes = [];
     state.progress = [];
   },
   addJob: (state, item) => {
     state.queue.push(item);
-    state.size += item.file.size;
+    state.sizes[state.id] = item.file.size;
     state.id++;
   },
   moveJob(state) {
@@ -33,6 +33,7 @@ const mutations = {
     Vue.set(state.uploads, item.id, item);
   },
   removeJob(state, id) {
+    Vue.delete(state.uploads, id);
     delete state.uploads[id];
   },
 };