Fixed formatting + added base image upload

index.js

@@ -11,6 +11,9 @@ const csp = require(`helmet`);
 const session = require("express-session");
 const nodemailer = require("nodemailer");
 const crypto = require("crypto");
+const multer = require("multer");
+
+const upload = multer({ dest: "static/uploads/" });
 
 // Inting the logger
 const logger = winston.createLogger({
@@ -57,7 +60,6 @@ app.use(csp.contentSecurityPolicy({
   },
   
 }))
-
 */
 
 // Settings
@@ -228,7 +230,7 @@ con.connect(function (err) {
   if (err) {
     mysqlIsUpAndOkay = false;
     logger.error("Connction to MySQL failed");
-    console.log(err)
+    console.log(err);
   } else {
     logger.info("Mysql is ready.");
     mysqlIsUpAndOkay = true;
@@ -395,15 +397,18 @@ app.get("/profile", function (req, res) {
       var Hour = new Date().getHours();
       var greeting = "Good night, ";
       if (Hour > 18) {
-        greeting = "Good evening, "
+        greeting = "Good evening, ";
       } else if (Hour > 13) {
         greeting = "Good afternoon, ";
       } else if (Hour > 5) {
         greeting = "Good morning, ";
       }
-      greeting += req.session.username
+      greeting += req.session.username;
-      const hash = crypto.createHash('md5').update(req.session.mail.replace(" ", "").toLowerCase()).digest('hex');
+      const hash = crypto
-      gravatarURL = "https://www.gravatar.com/avatar/" + hash
+        .createHash("md5")
+        .update(req.session.mail.replace(" ", "").toLowerCase())
+        .digest("hex");
+      gravatarURL = "https://www.gravatar.com/avatar/" + hash;
       const data = fs.readFileSync("templates/profile.html", "utf8");
       res.send(
         Eta.render(data, {
@@ -412,7 +417,7 @@ app.get("/profile", function (req, res) {
           siteTitel: sitePrefix + "Profile",
           fontawesomeKey: fontawesomeKey,
           greeting: greeting,
-          gravatarURL: gravatarURL
+          gravatarURL: gravatarURL,
         })
       );
     } else {
@@ -721,10 +726,8 @@ app.get("/logout", function (req, res) {
       url: "/",
     })
   );
-
 });
 
-
 app.get("/debug/showSessionInfo", function (req, res) {
   res.send(JSON.stringify(req.session));
 });
@@ -766,8 +769,6 @@ app.get("/map", function (req, res) {
   }
 });
 
-
-
 app.get("/createElevator", function (req, res) {
   if (mysqlIsUpAndOkay) {
     const data = fs.readFileSync("templates/createElevator.html", "utf8");
@@ -857,8 +858,63 @@ app.get("/api/getElevators", function (req, res) {
   }
 });
 
+app.post("/api/uploadImage", upload.any(), function (req, res) {
+  //TODO: Fix file ending, add image to elevator in DB
+  console.log("UPLOAD");
+  console.log(req.files);
+  req.files[0];
+  // Save Image End
+});
+
+// returns an object with the cookies' name as keys
+const getAppCookies = (req) => {
+  // We extract the raw cookies from the request headers
+  const rawCookies = req.headers.cookie.split("; ");
+  // rawCookies = ['myapp=secretcookie, 'analytics_cookie=beacon;']
+
+  const parsedCookies = {};
+  rawCookies.forEach((rawCookie) => {
+    const parsedCookie = rawCookie.split("=");
+    // parsedCookie = ['myapp', 'secretcookie'], ['analytics_cookie', 'beacon']
+    parsedCookies[parsedCookie[0]] = parsedCookie[1];
+  });
+  return parsedCookies;
+};
+
+app.post("/api/saveNewElevatorMeta", function (req, res) {
+  console.log(req.headers.cookie);
+  tempJs = JSON.parse(decodeURIComponent(getAppCookies(req, res)["tempStore"]));
+  console.log(tempJs);
+  const sql =
+    "#INSERT INTO elevators (lat, lng, manufacturer, modell, info, visitabilty, technology, amountOfFloors, maxPassangers, maxWeight) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)";
+  con.query(
+    sql,
+    [
+      tempJs.lat,
+      tempJs.lng,
+      tempJs.manuf,
+      tempJs.model,
+      tempJs.description,
+      tempJs.visit,
+      tempJs.type,
+      tempJs.flor,
+      tempJs.pepl,
+      tempJs.weig,
+    ],
+    function (err, result) {
+      if (err) throw err;
+      console.log("1 record inserted");
+      res.setHeader("Content-Type", "application/json");
+
+      res.send(
+        JSON.stringify({ state: "Okay", message: "Ok.", id: res.insertId })
+      );
+      res.status(200);
+    }
+  );
+});
+
 app.get("/api/getElevatorLocation", function (req, res) {
-  console.log(req.query);
   if (
     req.query.lan != undefined &&
     req.query.lat != undefined &&
@@ -981,7 +1037,7 @@ setInterval(() => {
       if (err) {
         mysqlIsUpAndOkay = false;
         logger.error("Connction to MySQL failed");
-        console.log(err)
+        console.log(err);
       } else {
         logger.info("Mysql is ready.");
         mysqlIsUpAndOkay = true;

package-lock.json

@@ -72,6 +72,11 @@
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
       "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
     },
+    "append-field": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/append-field/-/append-field-1.0.0.tgz",
+      "integrity": "sha1-HjRA6RXwsSA9I3SOeO3XubW0PlY="
+    },
     "aproba": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
@@ -165,6 +170,43 @@
         "concat-map": "0.0.1"
       }
     },
+    "buffer-from": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
+      "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A=="
+    },
+    "busboy": {
+      "version": "0.2.14",
+      "resolved": "https://registry.npmjs.org/busboy/-/busboy-0.2.14.tgz",
+      "integrity": "sha1-bCpiLvz0fFe7vh4qnDetNseSVFM=",
+      "requires": {
+        "dicer": "0.2.5",
+        "readable-stream": "1.1.x"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+        },
+        "readable-stream": {
+          "version": "1.1.14",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz",
+          "integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=",
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.1",
+            "isarray": "0.0.1",
+            "string_decoder": "~0.10.x"
+          }
+        },
+        "string_decoder": {
+          "version": "0.10.31",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+          "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ="
+        }
+      }
+    },
     "bytes": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
@@ -230,6 +272,41 @@
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
       "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
     },
+    "concat-stream": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz",
+      "integrity": "sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==",
+      "requires": {
+        "buffer-from": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^2.2.2",
+        "typedarray": "^0.0.6"
+      },
+      "dependencies": {
+        "readable-stream": {
+          "version": "2.3.7",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+          "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.3",
+            "isarray": "~1.0.0",
+            "process-nextick-args": "~2.0.0",
+            "safe-buffer": "~5.1.1",
+            "string_decoder": "~1.1.1",
+            "util-deprecate": "~1.0.1"
+          }
+        },
+        "string_decoder": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+          "requires": {
+            "safe-buffer": "~5.1.0"
+          }
+        }
+      }
+    },
     "console-control-strings": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
@@ -291,6 +368,38 @@
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
       "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups="
     },
+    "dicer": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/dicer/-/dicer-0.2.5.tgz",
+      "integrity": "sha1-WZbAhrszIYyBLAkL3cCc0S+stw8=",
+      "requires": {
+        "readable-stream": "1.1.x",
+        "streamsearch": "0.1.2"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+        },
+        "readable-stream": {
+          "version": "1.1.14",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz",
+          "integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=",
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.1",
+            "isarray": "0.0.1",
+            "string_decoder": "~0.10.x"
+          }
+        },
+        "string_decoder": {
+          "version": "0.10.31",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+          "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ="
+        }
+      }
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -659,6 +768,11 @@
         "brace-expansion": "^1.1.7"
       }
     },
+    "minimist": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
+    },
     "minipass": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.3.tgz",
@@ -686,6 +800,31 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
       "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
     },
+    "multer": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/multer/-/multer-1.4.2.tgz",
+      "integrity": "sha512-xY8pX7V+ybyUpbYMxtjM9KAiD9ixtg5/JkeKUTD6xilfDv0vzzOFcCp4Ljb1UU3tSOM3VTZtKo63OmzOrGi3Cg==",
+      "requires": {
+        "append-field": "^1.0.0",
+        "busboy": "^0.2.11",
+        "concat-stream": "^1.5.2",
+        "mkdirp": "^0.5.1",
+        "object-assign": "^4.1.1",
+        "on-finished": "^2.3.0",
+        "type-is": "^1.6.4",
+        "xtend": "^4.0.0"
+      },
+      "dependencies": {
+        "mkdirp": {
+          "version": "0.5.5",
+          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz",
+          "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==",
+          "requires": {
+            "minimist": "^1.2.5"
+          }
+        }
+      }
+    },
     "mysql": {
       "version": "2.18.1",
       "resolved": "https://registry.npmjs.org/mysql/-/mysql-2.18.1.tgz",
@@ -966,6 +1105,11 @@
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
       "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow="
     },
+    "streamsearch": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-0.1.2.tgz",
+      "integrity": "sha1-gIudDlb8Jz2Am6VzOOkpkZoanxo="
+    },
     "string-width": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
@@ -1036,6 +1180,11 @@
         "mime-types": "~2.1.24"
       }
     },
+    "typedarray": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
+      "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
+    },
     "uid-safe": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/uid-safe/-/uid-safe-2.1.5.tgz",
@@ -1126,6 +1275,11 @@
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
       "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
     },
+    "xtend": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ=="
+    },
     "yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",

package.json

@@ -25,6 +25,7 @@
     "express-session": "^1.17.2",
     "hcaptcha": "0.0.2",
     "helmet": "^4.6.0",
+    "multer": "^1.4.2",
     "mysql": "^2.18.1",
     "nodemailer": "^6.6.1",
     "winston": "^3.3.3"

static/css/mainMap.css

@@ -10,6 +10,7 @@
   border-radius: 2px;
   margin: 5px;
   padding: 4px;
+  overflow-y: scroll;
 }
 
 .map {
@@ -36,7 +37,6 @@ aside h2 {
   line-height: 1.05em;
 }
 
-
 .lds-ripple {
   display: inline-block;
   position: relative;
@@ -70,10 +70,6 @@ aside h2 {
   }
 }
 
-
-
-
-
 /* Slideshow container */
 .slideshow-container {
   max-width: 1000px;
@@ -90,7 +86,8 @@ aside h2 {
 }
 
 /* Next & previous buttons */
-.prev, .next {
+.prev,
+.next {
   cursor: pointer;
   /*position: absolute;*/
   margin: 20px;
@@ -103,19 +100,19 @@ aside h2 {
   transition: 0.6s ease;
   border-radius: 0 3px 3px 0;
   user-select: none;
-  background-color:#000;
+  background-color: #000;
 }
 
 /* Position the "next button" to the right */
 .next {
   right: 0;
   border-radius: 3px 0 0 3px;
-  
 }
 
 /* On hover, add a black background color with a little bit see-through */
-.prev:hover, .next:hover {
+.prev:hover,
-  background-color:#000;
+.next:hover {
+  background-color: #000;
 }
 
 /* Caption text */
@@ -150,7 +147,8 @@ aside h2 {
   transition: background-color 0.6s ease;
 }
 
-.active, .dot:hover {
+.active,
+.dot:hover {
   background-color: #717171;
 }
 
@@ -163,16 +161,24 @@ aside h2 {
 }
 
 @-webkit-keyframes fade {
-  from {opacity: .4} 
+  from {
-  to {opacity: 1}
+    opacity: 0.4;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
 @keyframes fade {
-  from {opacity: .4} 
+  from {
-  to {opacity: 1}
+    opacity: 0.4;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
-.elevatorPhoto{
+.elevatorPhoto {
   width: auto;
   max-height: 50vh;
 }

templates/createElevator.html

@@ -38,6 +38,8 @@
     integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
     crossorigin=""></script>
 
+  <script src="vendor/jquery/jquery-3.2.1.min.js"></script>
+
   <link rel="stylesheet" href="./leafletCluster/dist/MarkerCluster.css" />
   <link rel="stylesheet" href="./leafletCluster/dist/MarkerCluster.Default.css" />
 
@@ -54,7 +56,8 @@
     <div id="text">
       We've detected that there is a draft in your current session. Do you want to restore it?<br>
       <button class="button-primary" onclick="restoreFunc()">Yes, restore it</button>
-      <button onclick="noRestore()">No, don't restore it</button></div>
+      <button onclick="noRestore()">No, don't restore it</button>
+    </div>
   </div>
   <div style="margin: 0px">
     <div class="map" id="map"></div>
@@ -94,6 +97,9 @@
         <input type="number" step="1" min="1" id="pepl" name="pepl" value=4>
         <label for="weig">Max. Weight (kg):</label>
         <input type="number" step="1" min="1" id="weig" name="weig" value=0>
+        <label for="flor">Amount of Floors:</label>
+        <input type="number" step="1" min="1" id="flor" name="flor" value=0>
+
 
         <br>
         <button onclick="prevPage()">Go back one step <i class="fas fa-arrow-left"></i></button>
@@ -103,21 +109,27 @@
         <h5>3. Add a description</h5>
         <p>Add a description to the elevator. You may not use this field for advertisment.</p>
         <textarea id="description"></textarea>
+        <label for="manuf">Manufacturer: </label>
+        <input type="text" id="manuf" name="manuf">
+        <label for="model">Modell: </label>
+        <input type="text" id="model" name="model">
         <br>
         <button onclick="prevPage()">Go back one step <i class="fas fa-arrow-left"></i></button>
         <button onclick="nextDialogePage()" class="button-primary">Next step <i class="fas fa-arrow-right"></i></button>
       </step>
       <step id="step4" style="display: none;">
         <h5>4. Add images</h5>
-        <p>This is the last step. You can now add images. <b>Make sure no personal information is visibel in the image.</b></p>
+        <p>This is the last step. You can now add images. <b>Make sure no personal information is visibel in the
-        <input type="file" id="myFile" name="files" multiple>
+            image.</b></p>
+        <input type="file" id="myFile" name="myFile" multiple>
 
         <br>
         <button onclick="prevPage()">Go back one step <i class="fas fa-arrow-left"></i></button>
         <button onclick="nextDialogePage()" class="button-primary">Next step <i class="fas fa-arrow-right"></i></button>
       </step>
       <step class="missingAlert" id="missingAlert" style="display: none;">
-        <i class="fas fa-exclamation-triangle"></i> There are some empty fields. Please check the previous pages for empty fields!<br>
+        <i class="fas fa-exclamation-triangle"></i> There are some empty fields. Please check the previous pages for
+        empty fields!<br>
         <button onclick="prevPage()">Go back one step <i class="fas fa-arrow-left"></i></button>
       </step>
       <step id="step5" style="display: none;">
@@ -129,7 +141,16 @@
       </step>
       <step id="step6" style="display: none;">
         <h5>6. Saving</h5>
-        <br><br><center><div class="lds-ripple"><div></div><div></div></div></center>
+        <br><br>
+        <center>
+          <div class="lds-ripple">
+            <div></div>
+            <div></div>
+          </div>
+          <div style="display: none; color: grey;" id="imageUploadInfo">
+            Uploading image -/-
+          </div>
+        </center>
       </step>
     </div>
   </div>
@@ -139,13 +160,13 @@
   </aside>
   <script type="text/javascript">
 
-    function noRestore(){
+    function noRestore() {
       off();
       Cookies.remove("tempStore")
     }
 
-    function restoreFunc(){
+    function restoreFunc() {
-      try{
+      try {
         dataBlock = JSON.parse(dataBlock)
         document.getElementById("lat").value = dataBlock["lat"]
         document.getElementById("lng").value = dataBlock["lng"]
@@ -153,35 +174,87 @@
         document.getElementById("visit").value = dataBlock["visit"]
         document.getElementById("pepl").value = dataBlock["pepl"]
         document.getElementById("weig").value = dataBlock["weig"]
+        document.getElementById("manuf").value = dataBlock["manuf"]
+        document.getElementById("model").value = dataBlock["model"]
+        document.getElementById("flor").value = dataBlock["flor"]
         document.getElementById("description").value = dataBlock["description"]
-      }catch(ex){
+      } catch (ex) {
         dataBlock = {}
       }
       off()
     }
 
     dataBlock = Cookies.get("tempStore");
-    if(dataBlock == undefined){
+    if (dataBlock == undefined) {
       dataBlock = {};
-    }else{
+    } else {
       on()
     }
 
     var currentPage = 0;
-    function saveValues(){
+    function saveValues() {
       dataBlock["lat"] = document.getElementById("lat").value
       dataBlock["lng"] = document.getElementById("lng").value
       dataBlock["type"] = document.getElementById("type").value
       dataBlock["visit"] = document.getElementById("visit").value
       dataBlock["pepl"] = document.getElementById("pepl").value
       dataBlock["weig"] = document.getElementById("weig").value
+      dataBlock["manuf"] = document.getElementById("manuf").value
+      dataBlock["model"] = document.getElementById("model").value
+      dataBlock["flor"] = document.getElementById("flor").value
       dataBlock["description"] = document.getElementById("description").value
       Cookies.set('tempStore', JSON.stringify(dataBlock))
     }
-    function submit(){
+
+    function submit() {
       currentPage = 6;
       updateDialog()
       saveValues()
+      const options = {
+        method: 'POST',
+        body: JSON.stringify({})
+      };
+
+      fetch('/api/saveNewElevatorMeta', options)
+        .then(response => response.json())
+        .then(response => {
+          console.log(response)
+        });
+      console.log($('#myFile'))
+      document.getElementById("imageUploadInfo").style.display = 'block';
+      var filesToSend = $('#myFile').prop('files').length;
+      var i = 0;
+      while (i < filesToSend) {
+        document.getElementById("imageUploadInfo").innerHTML = "Uploading image " + String(i) + "/" + String(filesToSend)
+        console.log("Files left to send: ", filesToSend - i)
+        var file_data = $('#myFile').prop('files')[i];
+        var form_data = new FormData();
+        form_data.append('file', file_data);
+
+        console.log(file_data)
+        if (String(file_data.type).includes("image/")) {
+          $.ajax({
+            url: '/api/uploadImage',
+            dataType: 'json',
+            cache: false,
+            contentType: false,
+            processData: false,
+            data: form_data,
+            type: 'post',
+            success: function (data) {
+              alert(data);
+            }
+          });
+        } else {
+          console.log("Skipping nonimage file")
+        }
+        i++;
+      }
+
+
+
+
+
     }
     function updateDialog() {
       if (currentPage == 0) {
@@ -218,14 +291,14 @@
 
         containsEmpt = false;
         for (const [key, value] of Object.entries(dataBlock)) {
-          if(value == "" || value == undefined){
+          if (value == "" || value == undefined) {
             console.log("hi")
             console.log(key, value)
             containsEmpt = true;
             document.getElementById("missingAlert").style.display = 'block';
           }
         }
-        if(containsEmpt == false){
+        if (containsEmpt == false) {
           document.getElementById("missingAlert").style.display = 'none';
           currentPage = 5;
         }