add json file upload

public/index.html

@@ -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

@@ -68,6 +68,25 @@ $(document).ready(function() {
 		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) {
      	e.preventDefault();