UX: add progress bar for uploading images

src/Logic/ImageProviders/ImageUploadManager.ts

@@ -57,6 +57,9 @@ export class ImageUploadManager {
         extramessage?: string
     ) => Promise<void>
 
+    private readonly _progressCurrentImage: UIEventSource<number> = new UIEventSource(0)
+    public readonly progressCurrentImage: Store<number> = this._progressCurrentImage
+
     constructor(
         layout: ThemeConfig,
         uploader: ImageUploader,
@@ -276,11 +279,12 @@ export class ImageUploadManager {
         let absoluteUrl: string
 
         try {
-            ;({ key, value, absoluteUrl } = await this._uploader.uploadImage(
+            ({ key, value, absoluteUrl } = await this._uploader.uploadImage(
                 blob,
                 location,
                 author,
-                noblur
+                noblur,
+                this._progressCurrentImage
             ))
         } catch (e) {
             console.error("Could again not upload image due to", e)

src/Logic/ImageProviders/ImageUploader.ts

@@ -1,3 +1,5 @@
+import { UIEventSource } from "../UIEventSource"
+
 export interface ImageUploader {
     maxFileSizeInMegabytes?: number
     /**
@@ -8,7 +10,8 @@ export interface ImageUploader {
         blob: File,
         currentGps: [number, number],
         author: string,
-        noblur: boolean
+        noblur: boolean,
+        progress?: UIEventSource<number>
     ): Promise<UploadResult>
 }
 

src/Logic/ImageProviders/Panoramax.ts

@@ -252,6 +252,7 @@ export class PanoramaxUploader implements ImageUploader {
         currentGps: [number, number],
         author: string,
         noblur: boolean = false,
+        progress?: UIEventSource<number>,
         sequenceId?: string,
         datetime?: string
     ): Promise<{
@@ -319,15 +320,25 @@ export class PanoramaxUploader implements ImageUploader {
         const sequence: { id: string; "stats:items": { count: number } } = (
             await p.mySequences()
         ).find((s) => s.id === sequenceId)
-        const img = <ImageData>await p.addImage(blob, sequence, {
+        const options = {
             lon,
             lat,
             datetime,
             isBlurred: noblur,
+            onProgress: undefined,
             exifOverride: {
                 Artist: author,
             },
-        })
+        }
+        if (progress) {
+            options.onProgress = (e: ProgressEvent) => {
+                if (e.lengthComputable) {
+                    const percentage = (e.loaded / e.total) * 100
+                    progress.set(Math.round(percentage))
+                }
+            }
+        }
+        const img = <ImageData>await p.addImage(blob, sequence, options)
         PanoramaxImageProvider.singleton.addKnownMeta(img)
         return {
             key: "panoramax",