Legge til eventlistener for å vise filnavn

index.html

@@ -48,8 +48,8 @@
             </div>
 
             <div style="margin-top: 5px; margin-bottom: 5px;">
-                <input type="file" none="dialog" id="dialog">
-                <button id="clickOpen" onclick="clickMe()">Click here to open new layer</button>
+                <input type="file" none="dialog" id="dialog" multiple>
+                <button id="clickOpen" onclick="clickMe()">Click here to open new layers</button>
             </div>
 
             <div style="margin-left: 10px; font-size: 18px; height: 60vh;">

javascript/map.js

@@ -29,7 +29,7 @@ L.control.zoom({
 var baselayers = {
     "OpenStreetMap": osm_map,
     "Satellite": googleSat
-};
+}
 
 L.control.layers(baselayers).addTo(map)
 

javascript/openFileFromExplorer.js

-const clickOpen = document.getElementById("clickOpen");
-const dialog = document.getElementById("dialog");
+const clickOpen = document.getElementById("clickOpen"); // Knappen vi gir funksjonalitet
+const dialog = document.getElementById("dialog"); // Input-feltet vi har skjult, men som lagrer dataen som velges
 
 function clickMe() {
     dialog.click();
-};
+}
+
+dialog.addEventListener("input", () => {
+    if (dialog.files.length) {
+        let text = dialog.files[0].name;
+        document.getElementById("layers").innerHTML = text;
+    }
+});
\ No newline at end of file