Add rudimentary check for filesize, fix #497

Logic/ImageProviders/ImgurUploader.ts

@@ -8,11 +8,13 @@ export default class ImgurUploader {
     public readonly success: UIEventSource<string[]> = new UIEventSource<string[]>([]);
     private readonly _handleSuccessUrl: (string) => void;
     
+    public maxFileSizeInMegabytes = 10;
+
     constructor(handleSuccessUrl: (string) => void) {
         this._handleSuccessUrl = handleSuccessUrl;
     }
 
-    public uploadMany(title: string, description: string, files: FileList) {
+    public uploadMany(title: string, description: string, files: FileList): void {
         for (let i = 0; i < files.length; i++) {
             this.queue.data.push(files.item(i).name)
         }

UI/Image/ImageUploadFlow.ts

@@ -35,6 +35,9 @@ export class ImageUploadFlow extends Toggle {
                 )))
         })
         
+        uploader.queue.addCallbackD(q => console.log("Image upload queue is ", q))
+        uploader.failed.addCallbackD(q => console.log("Image upload fail list is ", q))
+        uploader.success.addCallbackD(q => console.log("Image upload success list is ", q))
 
         const licensePicker = new LicensePicker()
 
@@ -46,10 +49,23 @@ export class ImageUploadFlow extends Toggle {
 
         const fileSelector = new FileSelectorButton(label)
         fileSelector.GetValue().addCallback(filelist => {
-            if (filelist === undefined) {
+            if (filelist === undefined || filelist.length === 0) {
                 return;
             }
 
+
+            for (var i = 0; i < filelist.length; i++) {
+                const sizeInBytes=  filelist[i].size
+                console.log(filelist[i].name + " has a size of " + sizeInBytes + " Bytes");
+                if(sizeInBytes > uploader.maxFileSizeInMegabytes * 1000000){
+                    alert(Translations.t.image.toBig.Subs({
+                        actual_size: (Math.floor(sizeInBytes / 1000000)) + "MB",
+                        max_size: uploader.maxFileSizeInMegabytes+"MB"
+                    }).txt)
+                    return;
+                }
+            }
+            
             console.log("Received images from the user, starting upload")
             const license = licensePicker.GetValue()?.data ?? "CC0"
 
@@ -65,7 +81,7 @@ export class ImageUploadFlow extends Toggle {
             }
 
 
-            const title = matchingLayer?.title?.GetRenderValue(tags)?.ConstructElement().innerText ?? tags.name ?? "Unknown area";
+            const title = matchingLayer?.title?.GetRenderValue(tags)?.ConstructElement()?.innerText ?? tags.name ?? "Unknown area";
             const description = [
                 "author:" + State.state.osmConnection.userDetails.data.name,
                 "license:" + license,
@@ -80,10 +96,10 @@ export class ImageUploadFlow extends Toggle {
         const uploadStateUi = new UploadFlowStateUI(uploader.queue, uploader.failed, uploader.success)
 
         const uploadFlow: BaseUIElement = new Combine([
+            uploadStateUi,
             fileSelector,
             Translations.t.image.respectPrivacy.Clone().SetStyle("font-size:small;"),
-            licensePicker,
+            licensePicker
-            uploadStateUi
         ]).SetClass("flex flex-col image-upload-flow mt-4 mb-8 text-center")
 
 

langs/en.json

@@ -13,7 +13,8 @@
         "uploadDone": "<span class='thanks'>Your picture has been added. Thanks for helping out!</span>",
         "dontDelete": "Cancel",
         "doDelete": "Remove image",
-        "isDeleted": "Deleted"
+        "isDeleted": "Deleted",
+        "toBig": "Your image is too large as it is {actual_size}. Please use images of at most {max_size}"
     },
     "centerMessage": {
         "loadingData": "Loading data…",