Share axios download percent helper for ExifTool WASM.

Use entry.message for metadata initializing status instead of hardcoded copy.

frontend/src/components/upload/UploadQueueList.vue

@@ -97,10 +97,10 @@ const formatMetadataPreviewMessage = (entry: MetadataPreviewEntry): string => {
         const percent = wasmDownloadPercent.value;
 
         if (percent === null) {
-            return 'Downloading ExifTool…';
+            return entry.message;
         }
 
-        return `Downloading ExifTool… ${percent}%`;
+        return `${entry.message} ${percent}%`;
     }
 
     return entry.message;

frontend/src/utils/percentFromAxiosProgress.spec.ts

@@ -0,0 +1,26 @@
+import type { AxiosProgressEvent } from 'axios';
+import { describe, expect, it } from 'vitest';
+import { percentFromAxiosProgress } from '@/utils/percentFromAxiosProgress';
+
+const progress = (loaded: number, total?: number): AxiosProgressEvent =>
+    ({
+        loaded,
+        total,
+        bytes: 0,
+        lengthComputable: total !== undefined
+    }) as AxiosProgressEvent;
+
+describe('percentFromAxiosProgress', () => {
+    it('returns null when total is missing', () => {
+        expect(percentFromAxiosProgress(progress(50))).toBeNull();
+    });
+
+    it('returns rounded percent from loaded and total', () => {
+        expect(percentFromAxiosProgress(progress(250, 1000))).toBe(25);
+        expect(percentFromAxiosProgress(progress(1, 3))).toBe(33.33);
+    });
+
+    it('caps at 100', () => {
+        expect(percentFromAxiosProgress(progress(200, 100))).toBe(100);
+    });
+});

frontend/src/utils/percentFromAxiosProgress.ts

@@ -0,0 +1,11 @@
+import type { AxiosProgressEvent } from 'axios';
+
+export const percentFromAxiosProgress = (progressEvent: AxiosProgressEvent): number | null => {
+    if (!progressEvent.total) {
+        return null;
+    }
+
+    const percent = Math.min(100, (progressEvent.loaded / progressEvent.total) * 100);
+
+    return parseFloat(percent.toFixed(2));
+};

frontend/src/workers/exiftoolWorker.ts

@@ -4,6 +4,7 @@ import axios from 'axios';
 import { EXIFTOOL_WORKER_INIT_JPEG } from '@/consts/exiftoolWorkerInitJpeg';
 import type { ExiftoolWorkerInMessage } from '@/types/workers/exiftoolWorkerInMessage';
 import type { ExiftoolWorkerJob } from '@/types/workers/exiftoolWorkerJob';
+import { percentFromAxiosProgress } from '@/utils/percentFromAxiosProgress';
 import { resolveErrorMessage } from '@/utils/resolveErrorMessage';
 import { toArrayBuffer } from '@/utils/toArrayBuffer';
 
@@ -18,15 +19,13 @@ const fetchZeroperlWasm = async (): Promise<Response> => {
         const { data } = await axios.get<ArrayBuffer>(zeroperlWasmUrl, {
             responseType: 'arraybuffer',
             onDownloadProgress: progressEvent => {
-                if (!progressEvent.total) {
+                const percent = percentFromAxiosProgress(progressEvent);
+
+                if (percent === null) {
                     return;
                 }
 
-                const percent = Math.min(100, (progressEvent.loaded / progressEvent.total) * 100);
+                self.postMessage({ type: 'wasm-download-progress', percent });
-
-                const rounded = parseFloat(percent.toFixed(2));
-
-                self.postMessage({ type: 'wasm-download-progress', percent: rounded });
             }
         });