diff --git a/index.html b/index.html
index f6a49567da128657f02af1123e4fa2c871cba66e..46f687c05876b8624cc561c5c395a72bf4469f4d 100644
--- a/index.html
+++ b/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 -->
         
diff --git a/javascript/fileHandler.js b/javascript/fileHandler.js
new file mode 100644
index 0000000000000000000000000000000000000000..cfa1da4cc2d51826480deee08489f00e22f91b3d
--- /dev/null
+++ b/javascript/fileHandler.js
@@ -0,0 +1,31 @@
+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();
+}
diff --git a/javascript/openFileExplorer.js b/javascript/openFileExplorer.js
index 3bdee1abe896db1b979777621324fd3088315f93..5c2a4bc2d3d921d80d2da692aba32eb9a6b021b9 100644
--- a/javascript/openFileExplorer.js
+++ b/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";
+})