add json file upload

public/index.html

@@ -73,7 +73,7 @@
             <button style="position: relative;" id="saveAsJSONBtn" title="Save whiteboard as JSON" type="button" class="whiteboardBtn">
                 <i class="far fa-file-alt"></i>
                 <i style="position: absolute; top: 3px; left: 2px; color: #000000; background: grey; font-size: 0.5em; " class="fas fa-save"></i>
-            </button> 
+            </button>
 		</div>
 
 		<div class="btn-group">
@@ -85,6 +85,7 @@
                 <i class="far fa-file-alt"></i>
                 <i style="position: absolute; top: 3px; left: 2px; color: #000000; font-size: 0.5em; " class="fas fa-upload"></i>
             </button> 
+            <input style="display:none;" id="myFile" type="file"/>
 		</div>
 </body>
 </html>

public/js/main.js

@@ -66,7 +66,26 @@ $(document).ready(function() {
 		a.click();
 		// Remove anchor from body
 		document.body.removeChild(a);
-    });    
+    });  
+
+    $("#uploadJsonBtn").click(function() {
+    	$("#myFile").click();
+    });
+
+    $("#myFile").on("change", function() {
+    	var file = document.getElementById("myFile").files[0];
+    	var reader = new FileReader();
+		reader.onload = function (e) {
+		    try {
+		    	var j = JSON.parse(e.target.result);
+		    	whiteboard.loadJsonData(j);
+		    } catch(e) {
+		    	alert("File was not a valid JSON!");
+		    }
+		};
+		reader.readAsText(file);
+    	$(this).val("");
+    });
 
     var dragCounter = 0;
     $('#whiteboardContainer').on("dragenter", function(e) {