Fix: add 'onbeforeunload' if images are uploading, see #1841

src/Logic/Actors/PendingChangesUploader.ts

@@ -3,9 +3,10 @@ import Constants from "../../Models/Constants"
 import { UIEventSource } from "../UIEventSource"
 import { Utils } from "../../Utils"
 import { Feature } from "geojson"
+import { ImageUploadManager } from "../ImageProviders/ImageUploadManager"
 
 export default class PendingChangesUploader {
-    constructor(changes: Changes, selectedFeature: UIEventSource<Feature>) {
+    constructor(changes: Changes, selectedFeature: UIEventSource<Feature>, uploader : ImageUploadManager) {
         changes.pendingChanges
             .stabilized(Constants.updateTimeoutSec * 1000)
             .addCallback(() => changes.flushChanges("Flushing changes due to timeout"))
@@ -48,7 +49,9 @@ export default class PendingChangesUploader {
         }
 
         function onunload(e) {
-            if (changes.pendingChanges.data.length == 0) {
+            const pendingChanges = changes.pendingChanges.data.length
+            const uploadingImages = uploader.isUploading.data
+            if (pendingChanges == 0 && !uploadingImages) {
                 return
             }
             changes.flushChanges("onbeforeunload - probably closing or something similar")

src/Logic/ImageProviders/ImageUploadManager.ts

@@ -24,6 +24,7 @@ export class ImageUploadManager {
     private readonly _uploadRetriedSuccess: Map<string, UIEventSource<number>> = new Map()
     private readonly _osmConnection: OsmConnection
     private readonly _changes: Changes
+    public readonly isUploading: Store<boolean>
 
     constructor(
         layout: LayoutConfig,
@@ -37,6 +38,13 @@ export class ImageUploadManager {
         this._layout = layout
         this._osmConnection = osmConnection
         this._changes = changes
+
+        const failed = this.getCounterFor(this._uploadFailed, "*")
+        const done = this.getCounterFor(this._uploadFinished, "*")
+
+        this.isUploading = this.getCounterFor(this._uploadStarted, "*").map(startedCount => {
+            return startedCount > failed.data  + done.data
+        }, [failed, done])
     }
 
     /**

src/Models/ThemeViewState.ts

@@ -810,7 +810,7 @@ export default class ThemeViewState implements SpecialVisualizationState {
         new MetaTagging(this)
         new TitleHandler(this.selectedElement, this.featureProperties, this)
         new ChangeToElementsActor(this.changes, this.featureProperties)
-        new PendingChangesUploader(this.changes, this.selectedElement)
+        new PendingChangesUploader(this.changes, this.selectedElement, this.imageUploadManager)
         new SelectedElementTagsUpdater(this)
         new BackgroundLayerResetter(this.mapProperties.rasterLayer, this.availableLayers)
         new PreferredRasterLayerSelector(