Add file input for data reading

_assets/js/app.js

@@ -2,20 +2,28 @@
 $('#dataform').on('submit', function (e) {
   e.preventDefault();
 
-  var warData = JSON.parse( $.trim( $('#data').val() ) );
+  var inputContent = $.trim( $('#data').val() );
 
-  if( warData.results && 
-      warData.results[0] &&
-      warData.results[0].ident == "body" &&
-      warData.results[1] && 
-      warData.results[1].ident == "clanWarGetInfo" && 
-      warData.results[1].result && 
-      warData.results[1].result.response ) {
+  if ( document.getElementById("fileUpload").files.length > 0 ) {
+    getFileContents( document.getElementById("fileUpload").files[0] );
+  }
+  else if (inputContent.length > 0) {
+    var warData = JSON.parse( inputContent );
     initApp(warData, 'withSave', warData);
-  };
+  }
 });
 
 function initApp (data, callback, callbackData) {
+  if( !data.results || 
+      !data.results[0] ||
+      !data.results[0].ident == "body" ||
+      !data.results[1] || 
+      !data.results[1].ident == "clanWarGetInfo" ||
+      !data.results[1].result ||
+      !data.results[1].result.response ) {
+    return false;
+  }
+
   console.log(data)
   var mapData = data.results[1].result.response;
 

_assets/js/file_reader.js

@@ -0,0 +1,17 @@
+function getFileContents(file) {
+  var file = document.getElementById("fileUpload").files[0];
+  var fileContents = false;
+
+  if (file) {
+      var reader = new FileReader();
+      reader.readAsText(file, "UTF-8");
+      reader.onload = function (evt) {
+        var warData = JSON.parse(evt.target.result);
+        initApp(warData, 'withSave', warData);
+      }
+      reader.onerror = function (evt) {
+          console.error('error reading the file.')
+      }
+  }
+}
+

_includes/header.html

@@ -8,6 +8,7 @@
     <form id="dataform" class="form">
       <h3>Add War</h3>
       <textarea id="data">{{ site.testdata }}</textarea>
+      <input id="fileUpload" type="file" accept=".har" />
       <br />
       <input type="submit" value="Submit" class="button" />
       <input type="reset" value="Reset" class="button" />

_includes/scripts.html

@@ -7,6 +7,7 @@
   <script src="{{ "/assets/js/lib/jquery-3.4.1.min.js" | relative_url }}"></script>
   <script src="{{ "/assets/js/map.js" | relative_url }}"></script>
   <script src="{{ "/assets/js/utils.js" | relative_url }}"></script>
+  <script src="{{ "/assets/js/file_reader.js" | relative_url }}"></script>
   <script src="{{ "/assets/js/app.js" | relative_url }}"></script>
   <script src="{{ "/assets/js/localstorage.js" | relative_url }}"></script>
   <script src="{{ "/assets/js/hamburger.js" | relative_url }}"></script>

_site/index.html

@@ -29,6 +29,7 @@
     <form id="dataform" class="form">
       <h3>Add War</h3>
       <textarea id="data"></textarea>
+      <input id="fileUpload" type="file" accept=".har" />
       <br />
       <input type="submit" value="Submit" class="button" />
       <input type="reset" value="Reset" class="button" />