splitting all js into individual files to comparmentalize and getting rid of onload event (in favour of defer)

HaWeb/wwwroot/css/print.css

@@ -0,0 +1,24 @@
+/* PRINT */
+header {
+    @apply print:hidden
+  }
+
+.ha-footer {
+    @apply print:hidden
+}
+
+.ha-letterheadernav {
+    @apply print:!hidden
+}
+
+.ha-letterheader {
+    @apply print:!border-none
+}
+
+.ha-scrollbutton {
+    @apply print:!hidden
+}
+
+html {
+    @apply print:text-base
+}

HaWeb/wwwroot/css/site.css

@@ -14,6 +14,7 @@
 @import "./upload.css";
 @import "./index.css";
 @import "./search.css";
+@import "./print.css";
 
 @layer components {
   /* TODO: check what can be inlined (eg. used once in the code, has no double paths etc...) */  

HaWeb/wwwroot/js/active.js

@@ -0,0 +1,68 @@
+// Gives active classes to links with active URLs
+// Marks links as active which target URL starts with the current URL
+const markactive_startswith = function (element) {
+    var all_links = element.getElementsByTagName("a"),
+        i = 0,
+        len = all_links.length,
+        full_path = location.href.split("#")[0].toLowerCase(); //Ignore hashes
+
+    for (; i < len; i++) {
+        if (full_path.startsWith(all_links[i].href.toLowerCase())) {
+            all_links[i].className += " active";
+        }
+    }
+};
+
+// Marks links active which target URL is exact the same as the current URL
+const markactive_exact = function (element) {
+    var all_links = element.getElementsByTagName("a"),
+        i = 0,
+        len = all_links.length,
+        full_path = location.href.split("#")[0].toLowerCase(); //Ignore hashes
+
+    for (; i < len; i++) {
+        if (full_path == all_links[i].href.toLowerCase() || full_path == all_links[i].href.toLowerCase() + "/") {
+            all_links[i].className += " active";
+        }
+    }
+};
+
+// Marks links as active, single links mutch match exactly, dropdown only the beginning
+const markactive_menu = function (element) {
+    var all_links = element.getElementsByTagName("a"),
+        i = 0,
+        len = all_links.length,
+        marked = false,
+        full_path = location.href.split("#")[0].toLowerCase(); //Ignore hashes
+    full_path = full_path.split("?")[0];
+
+    for (; i < len; i++) {
+        if (all_links[i].parentNode.classList.contains("ha-topnav-dropdown")) {
+            if (full_path.startsWith(all_links[i].href.toLowerCase())) {
+                all_links[i].className += " active pointer-events-none";
+                marked = true;
+            }
+        } else {
+            if (full_path == all_links[i].href.toLowerCase() || full_path == all_links[i].href.toLowerCase() + "/") {
+                all_links[i].className += " active pointer-events-none";
+                marked = true;
+            }
+        }
+    }
+
+    i = 0;
+    if (marked === false) {
+        for (; i < len; i++) {
+            if (all_links[i].classList.contains("ha-active-default")) {
+                all_links[i].className += " active";
+            }
+        }
+    }
+};
+
+if (document.getElementById("ha-topnav") !== null)
+    markactive_menu(document.getElementById("ha-topnav"));
+if (document.getElementById("ha-register-nav") !== null)
+    markactive_exact(document.getElementById("ha-register-nav"));
+if (this.document.getElementById("ha-adminuploadfields") !== null)
+    markactive_exact(document.getElementById("ha-adminuploadfields"));

HaWeb/wwwroot/js/anchor.js

@@ -0,0 +1,22 @@
+// Marks anchors, if anchors are present in the URL
+const markanchor = function () {
+    var currentUrl = document.URL,
+        urlParts = currentUrl.split('#');
+    var anchor = (urlParts.length > 1) ? urlParts[1] : null;
+    if (anchor != null) {
+        var element = document.getElementById(anchor);
+        var pointerelement = document.createElement("span");
+        pointerelement.classList.add("ha-location");
+        pointerelement.prepend("☛");
+        if (element !== null && element.classList.contains("ha-linecount")) {
+            pointerelement.classList.add("-left-5");
+            pointerelement.classList.add("-top-1.5")
+            element.prepend(pointerelement);
+        } else if (element !== null && element.classList.contains("ha-commenthead")) {
+            pointerelement.classList.add("-left-6");
+            element.prepend(pointerelement);
+        }
+    }
+}
+
+markanchor();

HaWeb/wwwroot/js/briefe.js

@@ -0,0 +1,92 @@
+// Code specifically for the letter view
+const showhidebutton = function (
+    buttonid,
+    divid,
+    buttonlist,
+    divlist,
+    starthidden
+) {
+    let button = document.getElementById(buttonid);
+    let div = document.getElementById(divid);
+
+    if (starthidden && div !== null) {
+        div.classList.add("hide");
+    }
+
+    if (!starthidden && button !== null) {
+        button.classList.add("active");
+    }
+
+    if (button !== null) {
+        button.addEventListener("click", function () {
+            for (let btn of buttonlist) {
+                let inactivebutton = document.getElementById(btn);
+                if (inactivebutton !== null) inactivebutton.classList.remove("active");
+            }
+
+            for (let element of divlist) {
+                let hiddenelement = document.getElementById(element);
+                if (hiddenelement !== null) {
+                    hiddenelement.classList.add("hide")
+                    hiddenelement.classList.remove("flow-root");
+                };
+            }
+
+            if (button !== null) button.classList.add("active");
+            if (div !== null) {
+                div.classList.add("flow-root");
+                div.classList.remove("hide");
+            }
+        });
+    }
+};
+
+// Letter View: Show / Hide Tabs
+let buttonlist = ["ha-lettertextbtn", "ha-additionsbtn", "ha-marginalsbtn"];
+let divlist = ["ha-lettertext", "ha-additions", "ha-marginals"];
+
+if (this.document.getElementById("ha-lettertextbtn") !== null) {
+    showhidebutton(
+        "ha-lettertextbtn",
+        "ha-lettertext",
+        buttonlist,
+        divlist,
+        false
+    );
+    showhidebutton(
+        "ha-additionsbtn",
+        "ha-additions",
+        buttonlist,
+        divlist,
+        true
+    );
+    showhidebutton(
+        "ha-marginalsbtn",
+        "ha-marginals",
+        buttonlist,
+        divlist,
+        true
+    );
+} else {
+    showhidebutton(
+        "ha-lettertextbtn",
+        "ha-lettertext",
+        buttonlist,
+        divlist,
+        true
+    );
+    showhidebutton(
+        "ha-additionsbtn",
+        "ha-additions",
+        buttonlist,
+        divlist,
+        false
+    );
+    showhidebutton(
+        "ha-marginalsbtn",
+        "ha-marginals",
+        buttonlist,
+        divlist,
+        true
+    );
+}

HaWeb/wwwroot/js/filelistform.js

@@ -0,0 +1,30 @@
+const USESubmit = async function (oFormElement, file = null) {
+    let fd = new FormData(oFormElement);
+    document.getElementById("ha-filelistbutton").style.pointerEvents = "none";
+    document.getElementById("ha-lds-ellipsis-load").style.display = "inline-block";
+    await fetch(oFormElement.action, {
+        method: 'POST',
+        headers: {
+        'RequestVerificationToken': getCookie('RequestVerificationToken')
+        },
+        body: fd
+    })
+    .then(response => response.json())
+    .then(json => {
+        if ("Error" in json) {
+            document.getElementById("ha-filelistbutton").style.pointerEvents = "auto";
+            document.getElementById("ha-lds-ellipsis-load").style.display = "none";
+        document.getElementById("ha-filelistoutput").textContent = json.Error;
+        } 
+        else {
+            document.getElementById("ha-filelistbutton").style.pointerEvents = "auto";
+            document.getElementById("ha-lds-ellipsis-load").style.display = "none";
+        location.reload(); 
+        }
+    })
+    .catch ((e) => {
+        document.getElementById("ha-filelistbutton").style.pointerEvents = "auto";
+        document.getElementById("ha-lds-ellipsis-load").style.display = "none";
+        document.getElementById("ha-filelistoutput").textContent = e;
+    })
+}

HaWeb/wwwroot/js/index.js

@@ -0,0 +1,61 @@
+const ACTIVATEGOTOFILTER = function(filter, button) {
+    let f = filter.value;
+    if (f === "") {
+        button.disabled = true;
+        return;
+    }
+    button.disabled = false;
+}
+
+const ACTIVATEZHSEARCH = function(volume, page, button) {
+    let vol = volume.options[volume.selectedIndex].value;
+    let pg = page.value;
+    if (pg === "") {
+        button.disabled = true;
+        return;
+    }
+    button.disabled = false;
+}
+
+const SUBMITZHSEARCH = function(volume, page) {
+    let vol = volume.options[volume.selectedIndex].value;
+    let pg = page.value;
+    window.location.href = "/HKB/" + vol + "/" + pg;
+}
+
+const ACTIVATESEARCHFILTER = function(filter, button) {
+    let f = filter.value;
+    if (f === "") {
+        button.disabled = true;
+        return;
+    }
+    button.disabled = false;
+}
+
+// Go to letter HKB number
+let gotofilter = document.getElementById("ha-gotoletternumber");
+let gotosubmitbtn = document.getElementById("ha-gotoformsubmit");
+let gotoform = document.getElementById("ha-gotoform");
+ACTIVATEGOTOFILTER(gotofilter, gotosubmitbtn);
+gotofilter.addEventListener("input", () => ACTIVATEGOTOFILTER(gotofilter, gotosubmitbtn));
+
+// ZH Volume / Page Lookup
+let vol = document.getElementById("ha-zhformvolume");
+let pg = document.getElementById("ha-zhformpage");
+let zhsubmitbtn = document.getElementById("ha-zhformsubmit");
+let zhsearchform = document.getElementById("ha-zhform");
+ACTIVATEZHSEARCH(vol, pg, zhsubmitbtn);
+vol.addEventListener("change", () => ACTIVATEZHSEARCH(vol, pg, zhsubmitbtn));
+pg.addEventListener("input", () => ACTIVATEZHSEARCH(vol, pg, zhsubmitbtn));
+// Need to implement send bc razor tag helpers do not work here
+zhsearchform.addEventListener("submit", (ev) => { 
+    ev.preventDefault();
+    SUBMITZHSEARCH(vol, pg);
+});
+
+// Full-text search
+let searchfilter = document.getElementById("ha-searchformtext");
+let searchsubmitbtn = document.getElementById("ha-searchformsubmit");
+let searchform = document.getElementById("ha-searchform");
+ACTIVATESEARCHFILTER(searchfilter, searchsubmitbtn);
+searchfilter.addEventListener("input", () => ACTIVATESEARCHFILTER(searchfilter, searchsubmitbtn));

HaWeb/wwwroot/js/marginals.js

@@ -0,0 +1,169 @@
+// Script for auto collapsing marginal boxes
+const getLineHeight = function (element) {
+    var temp = document.createElement(element.nodeName),
+        ret;
+    temp.setAttribute("class", element.className);
+    temp.innerHTML = "Ü";
+    element.parentNode.appendChild(temp);
+    ret = temp.getBoundingClientRect().height;
+    temp.parentNode.removeChild(temp);
+    return ret;
+};
+
+const collapsebox = function (element, height, lineheight) {
+    element.style.maxHeight = height + "px";
+    element.classList.add("ha-collapsed-box");
+    element.classList.remove("ha-expanded-box");
+};
+
+const uncollapsebox = function (element) {
+    element.classList.remove("ha-collapsed-box");
+    element.classList.add("ha-expanded-box");
+};
+
+const addbuttoncaollapsebox = function (element, height, hoverfunction) {
+    let btn = document.createElement("div");
+    btn.classList.add("ha-btn-collapsed-box");
+
+    if (element.classList.contains("ha-collapsed-box")) {
+        btn.classList.add("ha-open-btn-collapsed-box");
+    } else {
+        btn.classList.add("ha-close-btn-collapsed-box");
+    }
+
+    btn.addEventListener("click", function (ev) {
+        ev.stopPropagation();
+        if (element.classList.contains("ha-collapsed-box")) {
+            uncollapsebox(element);
+            btn.classList.remove("ha-open-btn-collapsed-box");
+            btn.classList.add("ha-close-btn-collapsed-box");
+            btn.classList.add("ha-collapsed-box-manually-toggled");
+        } else {
+            collapsebox(element, height);
+            btn.classList.remove("ha-close-btn-collapsed-box");
+            btn.classList.remove("ha-collapsed-box-manually-toggled");
+            btn.classList.add("ha-open-btn-collapsed-box");
+        }
+    });
+
+    if (hoverfunction) {
+        let timer = null;
+
+        element.addEventListener("mouseenter", function (ev) {
+            ev.stopPropagation();
+            timer = setTimeout(function () {
+                if (element.classList.contains("ha-collapsed-box")) {
+                    uncollapsebox(element);
+                    btn.classList.remove("ha-open-btn-collapsed-box");
+                    btn.classList.add("ha-close-btn-collapsed-box");
+                }
+            }, 200);
+        });
+
+        element.addEventListener("mouseleave", function (ev) {
+            ev.stopPropagation();
+            if (timer != null) {
+                clearTimeout(timer);
+            }
+            if (
+                element.classList.contains("ha-expanded-box") &&
+                !btn.classList.contains("ha-collapsed-box-manually-toggled")
+            ) {
+                collapsebox(element, height);
+                btn.classList.remove("ha-close-btn-collapsed-box");
+                btn.classList.add("ha-open-btn-collapsed-box");
+            }
+        });
+    }
+    element.parentNode.insertBefore(btn, element);
+};
+
+const overlappingcollapsebox = function (selector, hoverfunction) {
+    let boxes = document.querySelectorAll(selector);
+    let lineheight = 1;
+
+    if (boxes.length >= 1) {
+        lineheight = getLineHeight(boxes[0]);
+    }
+
+    for (var i = 0; i < boxes.length; i++) {
+        if (i < boxes.length - 1) {
+            let element = boxes[i];
+            let thisrect = element.getBoundingClientRect();
+            let nextrect = boxes[i + 1].getBoundingClientRect();
+            let overlap = thisrect.bottom - nextrect.top;
+            if (
+                // -1 for catching lines that perfectly close up on each other
+                overlap >= -1 &&
+                !(window.getComputedStyle(element).display === "none")
+            ) {
+                let newlength = 0;
+                if (overlap >= 0)
+                    newlength = thisrect.height - overlap;
+                else
+                    newlength = thisrect.height - lineheight;
+                if (newlength % (lineheight * 3) <= 2)
+                    newlength -= lineheight;
+                let remainder = newlength % lineheight;
+                newlength = newlength - remainder - 1;
+
+                // Line clamping for Marginals
+                if (element.classList.contains("ha-marginalbox")) {
+                    let marginals = element.querySelectorAll(".ha-marginal");
+                    let h = 0;
+                    for (let m of marginals) {
+                        let cr = m.getBoundingClientRect();
+                        let eh = cr.bottom - cr.top;
+                        h += eh;
+                        if (h >= newlength) {
+                            let lines = Math.floor(eh / lineheight);
+                            let cutoff = Math.floor((h - newlength) / lineheight);
+                            m.style.cssText += "-webkit-line-clamp: " + (lines - cutoff) + ";";
+                        }
+                    }
+                }
+
+                requestAnimationFrame(() => {
+                    collapsebox(element, newlength, lineheight);
+                });
+                requestAnimationFrame(() => {
+                    addbuttoncaollapsebox(element, newlength, hoverfunction);
+                });
+            }
+        }
+    }
+};
+
+const marginalboxwidthset = function () {
+    let lt = document.getElementById("ha-letterbody");
+    if (lt !== null) {
+        let mg = lt.querySelectorAll(".ha-lettertext .ha-marginalbox");
+        if (mg.length > 0) {
+            let ltbcr = lt.getBoundingClientRect();
+            let mgbcr = mg[0].getBoundingClientRect();
+            let nw = ltbcr.right - mgbcr.left - 18;
+
+            for (let element of mg) {
+                element.style.width = nw + "px";
+            }
+        }
+    }
+}
+
+
+
+const collapseboxes = function () {
+    overlappingcollapsebox(".ha-neuzeit .ha-letlinks", true);
+    overlappingcollapsebox(".ha-forschung .ha-letlinks", true);
+    overlappingcollapsebox(".ha-commentlist .ha-letlinks", true);
+    overlappingcollapsebox(".ha-lettertext .ha-marginalbox", true);
+};
+
+marginalboxwidthset();
+collapseboxes();
+var doit;
+this.window.addEventListener("resize", function () {
+    this.clearTimeout(doit);
+    marginalboxwidthset();
+    doit = this.setTimeout(collapseboxes, 250);
+});

HaWeb/wwwroot/js/mobilemenu.js

@@ -0,0 +1,31 @@
+// Code for showing and hiding the mobile menu
+const openmenu = function () {
+    var x = document.getElementById("ha-topnav");
+    if (x !== null) x.className += " ha-topnav-collapsed";
+    let oldbutton = document.getElementById("openmenubutton");
+    if (oldbutton !== null) oldbutton.setAttribute("class", "hidden");
+    let newbutton = document.getElementById("closemenubutton");
+    if (newbutton !== null) newbutton.setAttribute("class", "");
+};
+
+const closemenu = function () {
+    var x = document.getElementById("ha-topnav");
+    if (x !== null) x.className = "ha-topnav";
+    let oldbutton = document.getElementById("closemenubutton");
+    if (oldbutton !== null) oldbutton.setAttribute("class", "hidden");
+    let newbutton = document.getElementById("openmenubutton");
+    if (newbutton !== null) newbutton.setAttribute("class", "");
+};
+
+// Menu: Show / Hide Buttons for mobile View
+if (
+    document.getElementById("openmenubutton") !== null &&
+    document.getElementById("closemenubutton") !== null
+) {
+    document
+        .getElementById("openmenubutton")
+        .addEventListener("click", openmenu);
+    document
+        .getElementById("closemenubutton")
+        .addEventListener("click", closemenu);
+}

HaWeb/wwwroot/js/publishform.js

@@ -0,0 +1,37 @@
+const LOCALPUBLISHSubmit = async function (oFormElement) {
+    var fd = new FormData();
+    document.getElementById("ha-publishfilelabel").style.pointerEvents = "none";
+    document.getElementById("ha-lds-ellipsis-publish").style.display = "inline-block";
+    document.getElementById("ha-publishmessage").style.opacity = "0";
+    await fetch(oFormElement.action, {
+        method: 'POST',
+        headers: {
+          'RequestVerificationToken': getCookie('RequestVerificationToken')
+        }
+      })
+      .then(response => response.json())
+      .then(json => {
+        if ("Error" in json) {
+          document.getElementById("ha-publishfilelabel").style.pointerEvents = "auto";
+          document.getElementById("ha-lds-ellipsis-publish").style.display = "none";
+          document.getElementById("ha-publishmessage").style.opacity = "1";
+          document.getElementById("publish-result").value = json.Error;
+        } else {
+          document.getElementById("ha-publishfilelabel").style.pointerEvents = "auto";
+          document.getElementById("ha-lds-ellipsis-publish").style.display = "none";
+          document.getElementById("ha-publishmessage").style.opacity = "1";
+          document.getElementById("publish-result").value = "Erfolg!";
+          location.reload();
+        }
+      })
+      .catch ((e) => {
+        document.getElementById("ha-publishfilelabel").style.pointerEvents = "auto";
+        document.getElementById("ha-lds-ellipsis-publish").style.display = "none";
+        document.getElementById("publish-result").value = "Keine Antwort. Bitte Seite neu laden!";
+    })
+  }
+
+var publishelement = document.getElementById("ha-publishform");
+var publishbutton = document.getElementById("ha-publishfilelabel");
+publishbutton.addEventListener("click", () => LOCALPUBLISHSubmit(publishelement));
+  

HaWeb/wwwroot/js/register.js

@@ -0,0 +1,14 @@
+const ACTIVATESEARCHFILTER = function(filter, button) {
+    let f = filter.value;
+    if (f === "") {
+        button.disabled = true;
+        return;
+    }
+    button.disabled = false;
+}
+
+let searchfilter = document.getElementById("ha-searchformtext");
+let searchsubmitbtn = document.getElementById("ha-searchformsubmit");
+let searchform = document.getElementById("ha-searchform");
+ACTIVATESEARCHFILTER(searchfilter, searchsubmitbtn);
+searchfilter.addEventListener("input", () => ACTIVATESEARCHFILTER(searchfilter, searchsubmitbtn));

HaWeb/wwwroot/js/scrollbutton.js

@@ -0,0 +1,25 @@
+// Script for showing and acting upon the "scroll to top button"
+const scrollFunction = function () {
+    button = document.getElementById("ha-scrollbutton");
+    if (button !== null) {
+        if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
+            // button.style.display = "block";
+            button.style.pointerEvents = "auto";
+            button.style.opacity = "1";
+        } else {
+            // button.style.display = "none";
+            button.style.pointerEvents = "none";
+            button.style.opacity = "0";
+        }
+    }
+}
+
+// Scroll button
+if (document.getElementById("ha-scrollbutton") !== null) {
+    scrollFunction();
+    document.getElementById("ha-scrollbutton").addEventListener("click", () => {
+        document.body.scrollTop = 0; // For Safari
+        document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
+    })
+    window.addEventListener("scroll", scrollFunction);
+}

HaWeb/wwwroot/js/search.js

@@ -0,0 +1,14 @@
+const ACTIVATESEARCHFILTER = function(filter, button) {
+    let f = filter.value;
+    if (f === "") {
+        button.disabled = true;
+        return;
+    }
+    button.disabled = false;
+}
+
+let searchfilter = document.getElementById("ha-searchformtext");
+let searchsubmitbtn = document.getElementById("ha-searchformsubmit");
+let searchform = document.getElementById("ha-searchform");
+ACTIVATESEARCHFILTER(searchfilter, searchsubmitbtn);
+searchfilter.addEventListener("input", () => ACTIVATESEARCHFILTER(searchfilter, searchsubmitbtn));

HaWeb/wwwroot/js/theme.js

@@ -0,0 +1,30 @@
+// Functions for switching theme
+const go_to_dark = function () {
+    localStorage.setItem("theme", "ha-toggledark");
+    document.documentElement.classList.add("dark");
+};
+
+const go_to_bright = function () {
+    document.documentElement.classList.remove("dark");
+    localStorage.setItem("theme", "ha-togglebright");
+};
+
+// Functions for reading theme settings
+const get_theme_settings = function (standard) {
+    var theme = localStorage.getItem("theme");
+    if (theme === null) theme = standard;
+    let toggleSwitch = document.getElementById(theme).click();
+};
+
+if (
+    document.getElementById("ha-togglebright") !== null &&
+    this.document.getElementById("ha-toggledark") !== null
+) {
+    document
+        .getElementById("ha-togglebright")
+        .addEventListener("click", go_to_bright);
+    document
+        .getElementById("ha-toggledark")
+        .addEventListener("click", go_to_dark);
+}
+get_theme_settings("ha-togglebright");

HaWeb/wwwroot/js/upload.js

@@ -0,0 +1,22 @@
+const hideshowfiles = function() {
+    let elem = document.getElementById("ha-availablefileslist");
+    if (elem.classList.contains('hidden')) {
+        
+        elem.classList.remove('hidden');
+        elem.classList.add('block');
+    }
+    else {
+        elem.classList.add('hidden');
+        elem.classList.remove('block');
+    }
+    }
+
+    function getCookie(name) {
+    var value = "; " + document.cookie;
+    var parts = value.split("; " + name + "=");
+    if (parts.length == 2) return parts.pop().split(";").shift();
+}
+
+var filesbutton = document.getElementById("ha-availablefiles");
+if (filesbutton !== null)
+    filesbutton.addEventListener("click", () => hideshowfiles());

HaWeb/wwwroot/js/uploadform.js

@@ -0,0 +1,73 @@
+const dropHandler = function (formelement, ev, dropzone) {
+    ev.preventDefault();
+    if (ev.dataTransfer.items) {
+      if (ev.dataTransfer.items[0].kind === 'file') {
+        var file = ev.dataTransfer.items[0].getAsFile();
+        UPLOADSubmit(formelement, file);
+      } else {
+        var file = ev.dataTransfer.files[0];
+        UPLOADSubmit(formelement, file);
+      }
+    }
+  }
+
+  const dragOverHandler = function (ev, dropzone) {
+    ev.preventDefault();
+  }
+
+  const dragLeaveHander = function (ev, dropzone) {
+    ev.preventDefault();
+  }
+
+  const dragEnterHandler = function (ev, dropzone) {
+    ev.preventDefault();
+  }
+
+  const UPLOADSubmit = async function (oFormElement, file = null) {
+    var fd = new FormData();
+    if (file !== null) fd.append("file", file);
+    else fd = new FormData(oFormElement);
+    document.getElementById("dropzone").style.pointerEvents = "none";
+    document.getElementById("ha-lds-ellipsis-upload").style.display = "inline-block";
+    document.getElementById("ha-uploadmessage").style.opacity = "0";
+    await fetch(oFormElement.action, {
+        method: 'POST',
+        headers: {
+          'RequestVerificationToken': getCookie('RequestVerificationToken')
+        },
+        body: fd
+      })
+      .then(response => response.json())
+      .then(json => {
+        if ("Error" in json) {
+          document.getElementById("dropzone").style.pointerEvents = "auto";
+          document.getElementById("ha-lds-ellipsis-upload").style.display = "none";
+          document.getElementById("ha-uploadmessage").style.opacity = "1";
+          oFormElement.elements.namedItem("upload-result").value = json.Error;
+        } else {
+          document.getElementById("dropzone").style.pointerEvents = "auto";
+          document.getElementById("ha-lds-ellipsis-upload").style.display = "none";
+          oFormElement.elements.namedItem("upload-result").value = "Erfolg!";
+          if ("Prefix" in json[0]) {
+            document.getElementById("dropzone").style.pointerEvents = "auto";
+            document.getElementById("ha-lds-ellipsis-upload").style.display = "none";
+            window.location.replace("/Admin/Upload/" + json[0].Prefix);
+          }
+        }
+      })
+      .catch ((e) => { 
+        document.getElementById("dropzone").style.pointerEvents = "auto";
+        document.getElementById("ha-lds-ellipsis-upload").style.display = "none";
+        document.getElementById("ha-uploadmessage").style.opacity = "1";
+        oFormElement.elements.namedItem("upload-result").value = "Keine Antwort. Bitte Seite neu laden!";
+      })
+  }
+
+var submitelement = document.getElementById("file");
+var formelement = document.getElementById("uploadForm");
+var dropzone = document.getElementById("dropzone");
+submitelement.addEventListener("change", () => UPLOADSubmit(formelement));
+dropzone.addEventListener("drop", (ev) => dropHandler(formelement, ev, dropzone));
+dropzone.addEventListener("dragover", (ev) => dragOverHandler(ev, dropzone));
+dropzone.addEventListener("dragleave", (ev) => dragLeaveHander(ev, dropzone));
+dropzone.addEventListener("dragenter", (ev) => dragEnterHandler(ev, dropzone));