From d227db526440de338d8929dc14d2c37c65b55178 Mon Sep 17 00:00:00 2001
From: rofl256 <rofl256@gmail.com>
Date: Thu, 8 Feb 2018 23:25:57 +0100
Subject: [PATCH] add json file upload

---
 public/index.html |  3 ++-
 public/js/main.js | 21 ++++++++++++++++++++-
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/public/index.html b/public/index.html
index c470db1..87c5aa9 100644
--- a/public/index.html
+++ b/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>
\ No newline at end of file
diff --git a/public/js/main.js b/public/js/main.js
index 7c582b9..844544e 100644
--- a/public/js/main.js
+++ b/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) {