More refactoring, still very broken

UI/Base/FileSelectorButton.ts

@@ -0,0 +1,62 @@
+import BaseUIElement from "../BaseUIElement";
+import {InputElement} from "../Input/InputElement";
+import {UIEventSource} from "../../Logic/UIEventSource";
+
+export default class FileSelectorButton extends InputElement<FileList> {
+
+    IsSelected: UIEventSource<boolean>;
+    private readonly _value = new UIEventSource(undefined);
+    private readonly _label: BaseUIElement;
+    private readonly _acceptType: string;
+
+    constructor(label: BaseUIElement, acceptType: string = "image/*") {
+        super();
+        this._label = label;
+        this._acceptType = acceptType;
+    }
+
+    GetValue(): UIEventSource<FileList> {
+        return this._value;
+    }
+
+    IsValid(t: FileList): boolean {
+        return true;
+    }
+
+    protected InnerConstructElement(): HTMLElement {
+        const self = this;
+        const el = document.createElement("form")
+        {
+            const label = document.createElement("label")
+            label.appendChild(this._label.ConstructElement())
+            el.appendChild(label)
+        }
+        {
+            const actualInputElement = document.createElement("input");
+            actualInputElement.style.cssText = "display:none";
+            actualInputElement.type = "file";
+            actualInputElement.accept = this._acceptType;
+            actualInputElement.name = "picField";
+            actualInputElement.multiple = true;
+
+            actualInputElement.onchange = () => {
+                if (actualInputElement.files !== null) {
+                    self._value.setData(actualInputElement.files)
+                }
+            }
+
+            el.addEventListener('submit', e => {
+                if (actualInputElement.files !== null) {
+                    self._value.setData(actualInputElement.files)
+                }
+                e.preventDefault()
+            })
+
+            el.appendChild(actualInputElement)
+        }
+
+        return undefined;
+    }
+
+
+}

UI/Base/VariableUIElement.ts

@@ -5,24 +5,28 @@ export class VariableUiElement extends BaseUIElement {
 
     private _element : HTMLElement;
     
-    constructor(contents: UIEventSource<string | BaseUIElement>) {
+    constructor(contents: UIEventSource<string | BaseUIElement | BaseUIElement[]>) {
         super();
         
         this._element = document.createElement("span")
         const el = this._element
         contents.addCallbackAndRun(contents => {
-            while(el.firstChild){
+            while (el.firstChild) {
                 el.removeChild(
                     el.lastChild
                 )
             }
-            
-            if(contents === undefined){
+
+            if (contents === undefined) {
                 return
             }
-            if(typeof contents === "string"){
+            if (typeof contents === "string") {
                 el.innerHTML = contents
-            }else{
+            } else if (contents instanceof Array) {
+                for (const content of contents) {
+                    el.appendChild(content.ConstructElement())
+                }
+                }else{
                 el.appendChild(contents.ConstructElement())
             }
         })