show pending upload count

frontend/src/components/prompts/UploadFiles.vue

@@ -8,7 +8,9 @@
       <div class="card-title">
         <h2>
           {{
-            $t("prompts.uploadFiles", { files: uploadStore.activeUploads.size })
+            $t("prompts.uploadFiles", {
+              files: uploadStore.pendingUploadCount,
+            })
           }}
         </h2>
         <div class="upload-info">

frontend/src/stores/upload.ts

@@ -2,7 +2,7 @@ import { defineStore } from "pinia";
 import { useFileStore } from "./file";
 import { files as api } from "@/api";
 import buttons from "@/utils/buttons";
-import { inject, markRaw, ref } from "vue";
+import { computed, inject, markRaw, ref } from "vue";
 import * as tus from "@/api/tus";
 
 // TODO: make this into a user setting
@@ -71,6 +71,17 @@ export const useUploadStore = defineStore("upload", () => {
     tus.abortAllUploads();
   };
 
+  //
+  // GETTERS
+  //
+
+  const pendingUploadCount = computed(
+    () =>
+      allUploads.value.length -
+      (lastUpload.value + 1) +
+      activeUploads.value.size
+  );
+
   //
   // PRIVATE FUNCTIONS
   //
@@ -162,5 +173,8 @@ export const useUploadStore = defineStore("upload", () => {
     // ACTIONS
     upload,
     abort,
+
+    // GETTERS
+    pendingUploadCount,
   };
 });