Add image upload functionality with imgur

Logic/ImageSearcher.ts

@@ -19,7 +19,6 @@ export class ImageSearcher extends UIEventSource<string[]> {
     constructor(tags: UIEventSource<any>) {
         super([]);
 
-        // this.ListenTo(this._embeddedImages);
         this._tags = tags;
 
 
@@ -27,7 +26,8 @@ export class ImageSearcher extends UIEventSource<string[]> {
         this._wdItem.addCallback(() => {
                 // Load the wikidata item, then detect usage on 'commons'
                 let wikidataId = self._wdItem.data;
-                if (wikidataId.startsWith("Q")) {
+                // @ts-ignore
+            if (wikidataId.startsWith("Q")) {
                     wikidataId = wikidataId.substr(1);
                 }
                 Wikimedia.GetWikiData(parseInt(wikidataId), (wd: Wikidata) => {
@@ -44,14 +44,17 @@ export class ImageSearcher extends UIEventSource<string[]> {
 
         this._commons.addCallback(() => {
             const commons: string = self._commons.data;
+            // @ts-ignore
             if (commons.startsWith("Category:")) {
                 Wikimedia.GetCategoryFiles(commons, (images: ImagesInCategory) => {
                     for (const image of images.images) {
                         self.AddImage(image.filename);
                     }
                 })
-            } else if (commons.startsWith("File:")) {
-                self.AddImage(commons);
+            } else { // @ts-ignore
+                if (commons.startsWith("File:")) {
+                    self.AddImage(commons);
+                }
             }
         });
 
@@ -79,7 +82,7 @@ export class ImageSearcher extends UIEventSource<string[]> {
     }
 
     private LoadImages(): void {
-        if(!this._activated){
+        if (!this._activated) {
             return;
         }
         const imageTag = this._tags.data.image;
@@ -90,6 +93,18 @@ export class ImageSearcher extends UIEventSource<string[]> {
             }
         }
 
+        const image0 = this._tags.data["image:0"];
+        if (image0 !== undefined) {
+            this.AddImage(image0);
+        }
+        let imageIndex = 1;
+        let imagei = this._tags.data["image:" + imageIndex];
+        while (imagei !== undefined) {
+            this.AddImage(imagei);
+            imageIndex++;
+            imagei = this._tags.data["image:" + imageIndex];
+        }
+
         const wdItem = this._tags.data.wikidata;
         if (wdItem !== undefined) {
             this._wdItem.setData(wdItem);

Logic/Imgur.ts

@@ -0,0 +1,66 @@
+import $ from "jquery"
+
+export class Imgur {
+
+
+    static uploadMultiple(
+        title: string, description: string, blobs: FileList,
+        handleSuccessfullUpload: ((imageURL: string) => void),
+        allDone: (() => void),
+        offset:number = 0) {
+
+        if (blobs.length == offset) {
+            allDone();
+            return;
+        }
+        const blob = blobs.item(offset);
+        const self = this;
+        this.uploadImage(title, description, blob,
+            (imageUrl) => {
+                handleSuccessfullUpload(imageUrl);
+                self.uploadMultiple(
+                    title, description, blobs,
+                    handleSuccessfullUpload,
+                    allDone,
+                    offset + 1);
+            }
+        );
+
+
+    }
+
+    static uploadImage(title: string, description: string, blob,
+                       handleSuccessfullUpload: ((imageURL: string) => void)) {
+
+        const apiUrl = 'https://api.imgur.com/3/image';
+        const apiKey = '7070e7167f0a25a';
+
+        var settings = {
+            async: true,
+            crossDomain: true,
+            processData: false,
+            contentType: false,
+            type: 'POST',
+            url: apiUrl,
+            headers: {
+                Authorization: 'Client-ID ' + apiKey,
+                Accept: 'application/json',
+            },
+            mimeType: 'multipart/form-data',
+        };
+        var formData = new FormData();
+        formData.append('image', blob);
+        formData.append("title", title);
+        formData.append("description", description)
+        // @ts-ignore
+        settings.data = formData;
+
+        // Response contains stringified JSON
+        // Image URL available at response.data.link
+        $.ajax(settings).done(function (response) {
+            response = JSON.parse(response);
+            handleSuccessfullUpload(response.data.link);
+        });
+    }
+
+}

Logic/OsmConnection.ts

@@ -69,6 +69,7 @@ export class OsmConnection {
 
             let data = self.userDetails.data;
             data.loggedIn = true;
+            console.log(userInfo);
             data.name = userInfo.getAttribute('display_name');
             data.csCount = userInfo.getElementsByTagName("changesets")[0].getAttribute("count");
             data.img = userInfo.getElementsByTagName("img")[0].getAttribute("href");

Logic/OsmImageUploadHandler.ts

@@ -0,0 +1,70 @@
+/**
+ * Helps in uplaoding, by generating the rigth title, decription and by adding the tag to the changeset
+ */
+import {UIEventSource} from "../UI/UIEventSource";
+import {ImageUploadFlow} from "../UI/ImageUploadFlow";
+import {Changes} from "./Changes";
+import {UserDetails} from "./OsmConnection";
+
+export class OsmImageUploadHandler {
+    private _tags: UIEventSource<any>;
+    private _changeHandler: Changes;
+    private _userdetails: UserDetails;
+
+    constructor(tags: UIEventSource<any>,
+                userdetails: UserDetails,
+                changeHandler: Changes
+    ) {
+        if (tags === undefined || userdetails === undefined || changeHandler === undefined) {
+            throw "Something is undefined"
+        }
+        console.log(tags, changeHandler, userdetails)
+        this._tags = tags;
+        this._changeHandler = changeHandler;
+        this._userdetails = userdetails;
+    }
+
+    private generateOptions(license: string) {
+        console.log(this)
+        console.log(this._tags, this._changeHandler, this._userdetails)
+        const tags = this._tags.data;
+
+        const title = tags.name ?? "Unknown area";
+        const description = [
+            "author:" + this._userdetails.name,
+            "license:" + license,
+            "wikidata:" + tags.wikidata,
+            "osmid:" + tags.id,
+            "name:" + tags.name
+        ].join("\n");
+
+        const changes = this._changeHandler;
+        return {
+            title: title,
+            description: description,
+            handleURL: function (url) {
+                let freeIndex = 0;
+                while (tags["image:" + freeIndex] !== undefined) {
+                    freeIndex++;
+                }
+                console.log("Adding image:" + freeIndex, url);
+                changes.addChange(tags.id, "image:" + freeIndex, url);
+            },
+            allDone: function () {
+                changes.uploadAll(function () {
+                    console.log("Writing changes...")
+                });
+            }
+        }
+    }
+
+    getUI(): ImageUploadFlow {
+        const self = this;
+        return new ImageUploadFlow(function (license) {
+                return self.generateOptions(license)
+            }
+        );
+    }
+
+
+}

Logic/Wikimedia.ts

@@ -100,6 +100,8 @@ export class Wikimedia {
             handleWikidata(wd);
         });
     }
+    
+    
 
 }