Merge branch '23-filhandtering-av-input-filer-fra-bruker' into 'dev'

Resolve "Filhåndtering av input-filer fra bruker"

See merge request !60

index.html

@@ -60,9 +60,9 @@
             </div>
 
             <div style="margin-left: 10px; margin-top: 5px; margin-bottom: 5px;">
-                <input type="file" accept=".zip" none="dialog" id="fileInput">
+                <input type="file" accept=".geojson" none="dialog" id="fileInput">
                 <div class="box3">
-                    <button class="onClick" onclick="clickMe()">Click here to choose a new layer</button>
+                    <button id="loadButton" class="onClick" onclick="clickMe()">Click here to choose a new layer</button>
 
                     <svg onclick="handleFile()" style="cursor: pointer; margin-right: 2vw;" xmlns="http://www.w3.org/2000/svg" 
                     width="6vh" height="6vh" fill="currentColor" class="bi bi-plus-circle-fill" viewBox="0 0 16 16">
@@ -281,6 +281,7 @@
         <script src="javascript/leafletLayerControl.js"></script>
         <script src="javascript/turfFormatConverter.js"></script>
         <script src="javascript/tutorial.js"></script>
+        <script src="javascript/fileHandler.js"></script>
 
         <!-- Map functions -->
         

javascript/fileHandler.js

+function handleFile() {
+    
+    const fileHandler = document.getElementById('fileInput');
+    const selectedFile = fileHandler.files[0];
+    
+    if (selectedFile == null) {
+        return alert("No chosen file!")
+    }
+
+    //console.log(selectedFile); // Printer bare selve filen til loggen
+
+    fileHandler.value = "";
+    document.getElementById("loadButton").style.backgroundColor = "orangered";
+    
+    var read = new FileReader();
+    read.readAsDataURL(selectedFile);
+    
+    var newLayer = L.geoJSON(null, {style: getStyle()})
+
+    read.onloadend = function() {
+        fetch(read.result).then(function(response) {
+            return response.json();
+        }).then(function(data) {
+            newLayer.addData(data);
+        })
+    }
+
+    overlayMaps[selectedFile.name] = newLayer;
+    handleLayer(selectedFile.name);
+    updateSidebar();
+}

javascript/openFileExplorer.js

@@ -3,3 +3,7 @@ const dialog = document.getElementById("fileInput"); // Input-feltet vi har skju
 function clickMe() {
     dialog.click();
 }
+
+dialog.addEventListener('change', () => {
+    document.getElementById("loadButton").style.backgroundColor = "green";
+})