Upload progress bar, fix #45

CHANGELOG.md

@@ -16,6 +16,7 @@ As this project is a user-facing application, the places in the semantic version
 ### Added
 
 - Basic functionality for adding and removing metadata resources [#145](https://github.com/spraakbanken/mink-frontend/issues/145)
+- Progress bar for source file uploads [#45](https://github.com/spraakbanken/mink-frontend/issues/45)
 - Some dynamic imports to reduce main chunk size
 
 ### Changed

src/api/api.ts

@@ -12,6 +12,7 @@ import type {
   ListExportsData,
   AdminModeStatusData,
   CreateMetadataData,
+  ProgressHandler,
 } from "./api.types";
 
 /** Mink backend API client */
@@ -112,13 +113,20 @@ class MinkApi {
   }
 
   /** @see https://ws.spraakbanken.gu.se/ws/mink/api-doc#tag/Manage-Sources/operation/uploadsources */
-  async uploadSources(corpusId: string, files: FileList) {
+  async uploadSources(
+    corpusId: string,
+    files: FileList,
+    onProgress?: ProgressHandler,
+  ) {
     const formData = new FormData();
     [...files].forEach((file) => formData.append("files[]", file));
     const response = await this.axios.put<MinkResponse>(
       "upload-sources",
       formData,
-      { params: { corpus_id: corpusId } },
+      {
+        params: { corpus_id: corpusId },
+        onUploadProgress: onProgress,
+      },
     );
     return response.data;
   }

src/api/api.types.ts

@@ -1,4 +1,5 @@
 import type { ByLang } from "@/util.types";
+import type { AxiosProgressEvent } from "axios";
 
 /** Properties common to most backend responses */
 export type MinkResponse<T extends { [k: string]: any } = {}> = T & {
@@ -132,3 +133,5 @@ export type ListExportsData = {
 export type AdminModeStatusData = {
   admin_mode_status: boolean;
 };
+
+export type ProgressHandler = (progressEvent: AxiosProgressEvent) => void;

src/api/backend.composable.ts

@@ -1,6 +1,7 @@
 import { useI18n } from "vue-i18n";
 import api from "./api";
 import useSpin from "@/spin/spin.composable";
+import type { ProgressHandler } from "./api.types";
 
 /** Wraps API endpoints with Spin. */
 export default function useMinkBackend() {
@@ -54,9 +55,13 @@ export default function useMinkBackend() {
       `corpus/${corpusId}/sources/${filename}`,
     );
 
-  const uploadSources = (corpusId: string, files: FileList) =>
+  const uploadSources = (
+    corpusId: string,
+    files: FileList,
+    onProgress?: ProgressHandler,
+  ) =>
     spin(
-      api.uploadSources(corpusId, files),
+      api.uploadSources(corpusId, files, onProgress),
       t("source.uploading", files.length),
       `corpus/${corpusId}/sources`,
     );

src/components/FileUpload.vue

@@ -1,16 +1,26 @@
 <script setup lang="ts">
+import { ref } from "vue";
+import type { AxiosProgressEvent } from "axios";
 import useMessenger from "@/message/messenger.composable";
-import FileDropArea from "@/components/FileDropArea.vue";
+import FileDropArea from "./FileDropArea.vue";
+import ProgressBar from "./ProgressBar.vue";
+import type { ProgressHandler } from "@/api/api.types";
 
 const props = defineProps<{
-  fileHandler: (files: FileList) => Promise<void>;
+  /**
+   * A function that presumably uploads given file(s) to the appropriate API.
+   */
+  fileHandler: (files: FileList, onProgress: ProgressHandler) => Promise<void>;
   primary?: boolean;
   accept?: string;
   multiple?: boolean;
+  showProgress?: boolean;
 }>();
 
 const { clear } = useMessenger();
+const progress = ref<number>();
 
+/** Call upload function when using the <input> element. */
 async function handleFileInput(event: Event) {
   const fileInput = event.target as HTMLInputElement;
   if (!fileInput.files) {
@@ -22,9 +32,19 @@ async function handleFileInput(event: Event) {
   fileInput.value = "";
 }
 
+/** Call upload function. */
 async function handleUpload(files: FileList) {
   clear();
-  await props.fileHandler(files);
+  try {
+    await props.fileHandler(files, onProgress);
+  } finally {
+    progress.value = undefined;
+  }
+}
+
+/** Report upload progress. */
+function onProgress(progressEvent: AxiosProgressEvent) {
+  progress.value = progressEvent.progress;
 }
 </script>
 
@@ -74,6 +94,12 @@ async function handleUpload(files: FileList) {
               @change="handleFileInput"
             />
 
+            <ProgressBar
+              v-if="showProgress && progress !== undefined"
+              :percent="progress * 100"
+              class="w-60"
+            />
+
             <slot />
           </div>
         </div>

src/corpus/createCorpus.composable.ts

@@ -10,7 +10,7 @@ import {
   type ConfigOptions,
 } from "@/api/corpusConfig";
 import type { AxiosError } from "axios";
-import type { MinkResponse } from "@/api/api.types";
+import type { MinkResponse, ProgressHandler } from "@/api/api.types";
 import useCreateResource from "@/resource/createResource.composable";
 
 export default function useCreateCorpus() {
@@ -69,8 +69,12 @@ export default function useCreateCorpus() {
   }
 
   // Like the `uploadSources` in `sources.composable.ts` but takes `corpusId` as argument.
-  async function uploadSources(files: FileList, corpusId: string) {
-    await mink.uploadSources(corpusId, files);
+  async function uploadSources(
+    files: FileList,
+    corpusId: string,
+    onProgress?: ProgressHandler,
+  ) {
+    await mink.uploadSources(corpusId, files, onProgress);
     const info = await mink.resourceInfoOne(corpusId).catch(alertError);
     if (!info) return;
     resourceStore.corpora[corpusId].sources = info.resource.source_files;

src/corpus/job/JobStatus.vue

@@ -7,8 +7,8 @@ import { useCorpusState } from "@/corpus/corpusState.composable";
 import ActionButton from "@/components/ActionButton.vue";
 import TerminalOutput from "@/components/TerminalOutput.vue";
 import useJob from "./job.composable";
-import ProgressBar from "./ProgressBar.vue";
 import JobStatusMessage from "./JobStatusMessage.vue";
+import ProgressBar from "@/components/ProgressBar.vue";
 
 const corpusId = useCorpusIdParam();
 const { runJob, abortJob, jobStatus, jobState, isJobRunning } =

src/corpus/sources/SourceUpload.vue

@@ -8,6 +8,7 @@ import UploadSizeLimits from "./UploadSizeLimits.vue";
 import useConfig from "../config/config.composable";
 import type { FileFormat } from "@/api/corpusConfig";
 import FileUpload from "@/components/FileUpload.vue";
+import type { ProgressHandler } from "@/api/api.types";
 
 const props = defineProps<{
   fileHandler?: (files: FileList) => Promise<void>;
@@ -18,12 +19,16 @@ const corpusId = useCorpusIdParam();
 const { uploadSources, extensions } = useSources(corpusId);
 const { config, uploadConfig } = useConfig(corpusId);
 const { alertError } = useMessenger();
+
 const extensionsAccept = computed(() =>
   extensions.value?.map((ext) => `.${ext}`).join(),
 );
 
-async function defaultFileHandler(files: FileList) {
-  const requests = [uploadSources(files).catch(alertError)];
+async function defaultFileHandler(
+  files: FileList,
+  onProgress: ProgressHandler,
+) {
+  const requests = [uploadSources(files, onProgress).catch(alertError)];
 
   // Also update format setting in config if needed
   const format = getFilenameExtension(files[0]?.name) as FileFormat;
@@ -42,6 +47,7 @@ const fileHandler = props.fileHandler || defaultFileHandler;
     :primary="primary"
     :accept="extensionsAccept"
     multiple
+    show-progress
   >
     <UploadSizeLimits />
   </FileUpload>

src/corpus/sources/SourcesPanel.vue

@@ -21,18 +21,18 @@ const totalSize = computed(() =>
 </script>
 
 <template>
+  <div class="flex flex-wrap gap-x-8">
+    <span>{{ $t("files", sources.length) }}, {{ filesize(totalSize) }}</span>
+    <span v-if="info">
+      {{ $t("source.limit.corpus.recommended") }}:
+      {{ filesize(info.recommended_file_size.min_file_length.value) }}
+    </span>
+    <span v-if="info">
+      {{ $t("source.limit.corpus.max") }}:
+      {{ filesize(info.file_size_limits.max_corpus_length.value) }}
+    </span>
+  </div>
   <PendingContent :on="`corpus/${corpusId}/sources`">
-    <div class="flex flex-wrap gap-x-8">
-      <span>{{ $t("files", sources.length) }}, {{ filesize(totalSize) }}</span>
-      <span v-if="info">
-        {{ $t("source.limit.corpus.recommended") }}:
-        {{ filesize(info.recommended_file_size.min_file_length.value) }}
-      </span>
-      <span v-if="info">
-        {{ $t("source.limit.corpus.max") }}:
-        {{ filesize(info.file_size_limits.max_corpus_length.value) }}
-      </span>
-    </div>
     <table v-if="sources.length" class="w-full mt-4 striped">
       <thead>
         <tr>
@@ -64,6 +64,9 @@ const totalSize = computed(() =>
         </tr>
       </tbody>
     </table>
+  </PendingContent>
+
+  <PendingContent :on="`corpus/${corpusId}/sources`" blocking>
     <SourceUpload :primary="isEmpty" />
   </PendingContent>
 </template>

src/corpus/sources/sources.composable.ts

@@ -4,7 +4,7 @@ import useMinkBackend from "@/api/backend.composable";
 import { useResourceStore } from "@/store/resource.store";
 import useMessenger from "@/message/messenger.composable";
 import { getFilenameExtension } from "@/util";
-import type { FileMeta } from "@/api/api.types";
+import type { FileMeta, ProgressHandler } from "@/api/api.types";
 
 export default function useSources(corpusId: string) {
   const resourceStore = useResourceStore();
@@ -29,8 +29,8 @@ export default function useSources(corpusId: string) {
     return mink.downloadPlaintext(corpusId, source.name).catch(alertError);
   }
 
-  async function uploadSources(files: FileList) {
-    await mink.uploadSources(corpusId, files);
+  async function uploadSources(files: FileList, onProgress?: ProgressHandler) {
+    await mink.uploadSources(corpusId, files, onProgress);
     loadSources();
   }