User can upload Xournal++ files via the plugin

src/main/webapp/myPlugins/dtdesign.js

@@ -195,11 +195,35 @@ Draw.loadPlugin(function(ui) {
     });
   }
 
-  function savePages(onlyCurrentPage) {
-    saveStatusDiv.innerHTML = "Saving page(s)..."
-    saveStatusDiv.style.color = null;
+  function uploadResponseHandler(statusDiv, refreshListCallback) {
+    statusDiv.innerHTML = "Saving ...";
+    statusDiv.style.color = null;
     omlStatusDiv.innerHTML = "";
 
+    return res => {
+      if (res.status >= 200 && res.status < 300) {
+        errWndDiv.innerText = "No error.";
+        res.json().then(parsedAs => {
+          statusDiv.innerHTML = "✓ Generated OML (" + parsedAs.join(", ") + ")";
+          statusDiv.style.color = "green";
+        });
+        refreshListCallback();
+        rebuildOML();
+      }
+      else {
+        statusDiv.innerHTML = "✗ Failed to save/parse. ";
+        statusDiv.appendChild(getErrDetailsAnchor());
+        res.text().then(text => {
+          errWndDiv.innerText = text;
+        });
+        statusDiv.style.color = "red";
+      }
+    };
+  }
+
+  function savePages(onlyCurrentPage) {
+    const responseHandler = uploadResponseHandler(saveStatusDiv, refreshDrawioModels);
+
     const headers = new Headers({
       "Content-Type": "application/xml",
     });
@@ -216,25 +240,7 @@ Draw.loadPlugin(function(ui) {
       headers,
       body: xml,
     })
-    .then(res => {
-      if (res.status >= 200 && res.status < 300) {
-        errWndDiv.innerText = "No error.";
-        res.json().then(parsedAs => {
-          saveStatusDiv.innerHTML = "✓ Generated OML (" + parsedAs.join(", ") + ")";
-          saveStatusDiv.style.color = "green";
-        });
-        refreshDrawioModels();
-        rebuildOML();
-      }
-      else {
-        saveStatusDiv.innerHTML = "✗ Failed to save/parse. ";
-        saveStatusDiv.appendChild(getErrDetailsAnchor());
-        res.text().then(text => {
-          errWndDiv.innerText = text;
-        });
-        saveStatusDiv.style.color = "red";
-      }
-    });
+    .then(responseHandler);
   }
 
   let highlight;
@@ -310,26 +316,43 @@ Draw.loadPlugin(function(ui) {
     wndDiv.style.overflow = 'auto';
     wndDiv.classList.add("geFormatContainer");
 
-  const saveDiv = document.createElement('div');
-    saveDiv.classList.add('geFormatSection')
-    saveDiv.style.padding = '12px 14px 8px 14px';
-    wndDiv.appendChild(saveDiv);
+  const omlDiv = document.createElement('div');
+    omlDiv.classList.add('geFormatSection')
+    omlDiv.style.padding = '12px 14px 8px 14px';
+    wndDiv.appendChild(omlDiv);
+
+  const omlLabel = document.createElement('div');
+    omlLabel.innerText = "OML Status";
+    omlLabel.style.fontWeight = 'bold';
+    omlDiv.appendChild(omlLabel);
+
+  const omlStatusDiv = document.createElement('div');
+    omlStatusDiv.innerText = "Ready";
+    omlDiv.appendChild(omlStatusDiv);
+
+  const omlForceButton = mxUtils.button("Force rebuild", function() {
+    rebuildOML();
+  });
+    omlDiv.appendChild(omlForceButton);
+
+  const savePageDiv = document.createElement('div');
+    // savePageDiv.classList.add('geFormatSection')
+    // savePageDiv.style.padding = '12px 14px 8px 14px';
+    // wndDiv.appendChild(savePageDiv);
 
   const saveButton = mxUtils.button("Save Current Page", function() {
     savePages(true);
   });
     saveButton.style.width = "100%";
+    saveButton.style.marginTop = "4px";
     saveButton.style.marginBottom = "2px";
-    saveDiv.appendChild(saveButton);
+    savePageDiv.appendChild(saveButton);
 
   const saveStatusDiv = document.createElement('div');
-    saveDiv.appendChild(saveStatusDiv);
+    savePageDiv.appendChild(saveStatusDiv);
 
-  const omlStatusDiv = document.createElement('div');
-    omlStatusDiv.innerText = "Ready";
-    saveDiv.appendChild(omlStatusDiv);
 
-  function createModelList(modelType, buttonLabel, onButtonClick) {
+  function createModelList(modelType, uploadDiv, downloadButtonLabel, onDownloadClick) {
     const lsDiv = document.createElement('div');
       lsDiv.classList.add('geFormatSection')
       lsDiv.style.padding = '12px 14px 8px 14px';
@@ -343,6 +366,8 @@ Draw.loadPlugin(function(ui) {
     const modelsDiv = document.createElement('div');
       lsDiv.appendChild(modelsDiv);
 
+    lsDiv.appendChild(uploadDiv);
+
     // Refreshes the list of models shown in the ModelVerse window
     return function refreshList() {
       fetch(BACKEND + "/files/" + modelType, {
@@ -354,7 +379,7 @@ Draw.loadPlugin(function(ui) {
           modelsDiv.replaceChildren(...models.map(modelName => {
             const div = document.createElement('div');
               div.style.padding = '3px 0px';
-            const loadButton = mxUtils.button(buttonLabel, () => onButtonClick(modelName));
+            const loadButton = mxUtils.button(downloadButtonLabel, () => onDownloadClick(modelName));
               loadButton.style.marginLeft = "12px";
             div.appendChild(document.createTextNode(modelName));
             div.appendChild(loadButton);
@@ -371,8 +396,41 @@ Draw.loadPlugin(function(ui) {
     }
   }
 
-  const refreshDrawioModels = createModelList("drawio", "Open", modelName => loadPage(modelName));
-  const refreshXoppModels = createModelList("xopp", "Download", modelName => {
+  const uploadXoppDiv = document.createElement('div');
+    // savePageDiv.classList.add('')
+    // savePageDiv.style.padding = '12px 14px 8px 14px';
+  const uploadXoppLabel = document.createElement('label');
+    uploadXoppLabel.innerText = "Upload xopp:";
+    uploadXoppLabel.for = "uploadXoppButton";
+    uploadXoppDiv.appendChild(uploadXoppLabel);
+
+  const uploadXoppButton = document.createElement('input');
+    uploadXoppButton.type = "file";
+    uploadXoppButton.id = "uploadXoppButton";
+    uploadXoppButton.style.width = "100%";
+    uploadXoppButton.style.marginTop = "4px";
+    uploadXoppButton.style.marginBottom = "2px";
+    uploadXoppButton.accept = "application/x-xopp,.xopp";
+    // uploadXoppButton.multiple = true;
+    uploadXoppButton.onchange = e => {
+      const responseHandler = uploadResponseHandler(xoppStatusDiv, refreshXoppModels);
+      Array.from(e.target.files).map(file => {
+        fetch(BACKEND + "/files/xopp/" + file.name, {
+          method: "PUT",
+          body: file,
+        })
+        .then(responseHandler);
+      })
+    };
+    uploadXoppDiv.appendChild(uploadXoppButton);
+
+  const xoppStatusDiv = document.createElement('div');
+    uploadXoppDiv.appendChild(xoppStatusDiv);
+
+
+
+  const refreshDrawioModels = createModelList("drawio", savePageDiv, "Open", modelName => loadPage(modelName));
+  const refreshXoppModels = createModelList("xopp", uploadXoppDiv, "Download", modelName => {
     const a = document.createElement('a');
     document.body.appendChild(a);
     a.setAttribute('href', BACKEND + "/files/xopp/" + modelName);