File uploader updates

_assets/js/app.js

@@ -4,15 +4,19 @@ $('#dataform').on('submit', function (e) {
 
   var inputContent = $.trim( $('#data').val() );
 
-  if ( document.getElementById("fileUpload").files.length > 0 ) {
-    getFileContents( document.getElementById("fileUpload").files[0] );
-  }
-  else if (inputContent.length > 0) {
+  if (inputContent.length > 0) {
     var warData = JSON.parse( inputContent );
     initApp(warData, 'withSave', warData);
   }
 });
 
+$('#fileUpload').on('change', function () {
+  var fileUploader = document.getElementById("fileUpload");
+  if ( fileUploader.files.length > 0 ) {
+    getFileContents( fileUploader.files[0] );
+  }
+});
+
 function initApp (data, callback, callbackData) {
   if( !data.results || 
       !data.results[0] ||

_assets/sass/modules/_header.scss

@@ -34,4 +34,8 @@ header {
       margin-left: 10px;
     }
   }
+
+  [type="file"] {
+    display: none;
+  }
 }

_includes/header.html

@@ -8,13 +8,15 @@
     <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" />
+      <label class="button">
+        Upload File
+        <input id="fileUpload" type="file" accept=".har" />
+      </label>
+      <br />
       <a href="#" class="button button--danger"
       onClick="(function(){var newStorage=JSON.parse(localStorage.getItem('HeroWarsHistory'));newStorage.shift();localStorage.setItem('HeroWarsHistory',JSON.stringify(newStorage));})();">
-      Storage Fix</a>
+      Remove Newest Entry</a>
     </form>
 </header>
 

_site/index.html

@@ -29,13 +29,15 @@
     <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" />
+      <label class="button">
+        Upload File
+        <input id="fileUpload" type="file" accept=".har" />
+      </label>
+      <br />
       <a href="#" class="button button--danger"
       onClick="(function(){var newStorage=JSON.parse(localStorage.getItem('HeroWarsHistory'));newStorage.shift();localStorage.setItem('HeroWarsHistory',JSON.stringify(newStorage));})();">
-      Storage Fix</a>
+      Remove Newest Entry</a>
     </form>
 </header>