Add image upload functionality with imgur

2020-06-25 03:39:31 +02:00 · 2020-06-25 03:39:31 +02:00 · 2acd53d150
commit 2acd53d150
parent 6187122294
21 changed files with 458 additions and 69 deletions
--- a/UI/ImageUploadFlow.ts
+++ b/UI/ImageUploadFlow.ts
@ -0,0 +1,92 @@
+import {UIElement} from "./UIElement";
+import {UIEventSource} from "./UIEventSource";
+import {UIRadioButton} from "./UIRadioButton";
+import {VariableUiElement} from "./VariableUIElement";
+import $ from "jquery"
+import {Imgur} from "../Logic/Imgur";
+
+export class ImageUploadFlow extends UIElement {
+    private _licensePicker: UIRadioButton;
+    private _licenseExplanation: UIElement;
+    private _isUploading: UIEventSource<number> = new UIEventSource<number>(0)
+    private _uploadOptions: (license: string) => { title: string; description: string; handleURL: (url: string) => void; allDone: (() => void) };
+
+    constructor(uploadOptions: ((license: string) =>
+        {
+            title: string,
+            description: string,
+            handleURL: ((url: string) => void),
+            allDone: (() => void)
+        })
+    ) {
+        super(undefined);
+        this._uploadOptions = uploadOptions;
+        this.ListenTo(this._isUploading);
+        this._licensePicker = UIRadioButton.FromStrings(
+            [
+                "CC-BY-SA",
+                "CC-BY",
+                "CC0"
+            ]
+        );
+        const licenseExplanations = {
+            "CC-BY-SA":
+                "<b>Creative Commonse met naamsvermelding en gelijk delen</b><br/>" +
+                "Je foto mag door iedereen gratis gebruikt worden, als ze je naam vermelden én ze afgeleide werken met deze licentie en attributie delen.",
+            "CC-BY":
+                "<b>Creative Commonse met naamsvermelding</b> <br/>" +
+                "Je foto mag door iedereen gratis gebruikt worden, als ze je naam vermelden",
+            "CC0":
+                "<b>Geen copyright</b><br/> Je foto mag door iedereen voor alles gebruikt worden"
+        }
+        this._licenseExplanation = new VariableUiElement(
+            this._licensePicker.SelectedElementIndex.map((license) => {
+                return licenseExplanations[license?.value]
+            })
+        );
+    }
+
+
+    protected InnerRender(): string {
+
+        if (this._isUploading.data > 0) {
+            return "<b>Bezig met uploaden, nog " + this._isUploading.data + " foto's te gaan...</b>"
+        }
+
+        return "<b>Foto's toevoegen</b><br/>" +
+            'Kies een licentie:<br/>' +
+            this._licensePicker.Render() +
+            this._licenseExplanation.Render() + "<br/>" +
+            '<input type="file" accept="image/*" name="picField" id="fileselector-' + this.id + '" size="24" multiple="multiple" alt=""/><br/>'
+            ;
+    }
+
+    InnerUpdate(htmlElement: HTMLElement) {
+        super.InnerUpdate(htmlElement);
+        this._licensePicker.Update();
+        const selector = document.getElementById('fileselector-' + this.id);
+        const self = this;
+        if (selector != null) {
+            selector.onchange = function (event) {
+                const files = $(this).get(0).files;
+                self._isUploading.setData(files.length);
+
+                const opts = self._uploadOptions(self._licensePicker.SelectedElementIndex.data.value);
+
+                Imgur.uploadMultiple(opts.title, opts.description, files,
+                    function (url) {
+                        console.log("File saved at", url);
+                        self._isUploading.setData(self._isUploading.data - 1);
+                        opts.handleURL(url);
+                    },
+                    function () {
+                        console.log("All uploads completed")
+                        opts.allDone();
+                    }
+                )
+            }
+        }
+    }
+
+
+}