JSON import snippet from somewhere

brown-wall.html

@@ -10,9 +10,13 @@
 	<main>
 		<h1>Brown Wall</h1>
 		<h3>A wall which has been hit with a considerable amount of faeces.</h3>
-		<noscript>Enable JS to use this application.</noscript>
 		<div id="menu-container" class="menu-container">
+		<noscript>Enable JS to use this application.</noscript>
 		</div>
+
+		<input type="file" id="selectFiles" value="Import"/>
+		<button id="import">Import</button>
+		<textarea id="result" cols="30" rows="10"></textarea>
 	</main>
 </body>
 <script src="main.js"></script>

main.js

@@ -20,4 +20,22 @@ menus.forEach( menu =>{
     menu.items.forEach(item =>{
         dropdownSelect.append(Object.assign(document.createElement('option'), {id:item.toLowerCase(), innerHTML:item}))
     })
-})
+})
+
+document.getElementById('import').onclick = function() {
+    const files = document.getElementById('selectFiles').files;
+    if (files.length <= 0) {
+        return false;
+    }
+  
+  var fr = new FileReader();
+  
+  fr.onload = function(e) { 
+  console.log(e);
+    var result = JSON.parse(e.target.result);
+    var formatted = JSON.stringify(result, null, 2);
+        document.getElementById('result').value = formatted;
+  }
+  
+  fr.readAsText(files.item(0));
+};