fix drag and drop functions

.gitignore

@@ -57,3 +57,5 @@ typings/
 # dotenv environment variables file
 .env
 
+/public/uploads
+/package-lock.json

package.json

@@ -18,6 +18,8 @@
   ],
   "dependencies": {
     "express": "*",
+    "formidable": "*",
+    "fs-extra": "*",
     "socket.io": "2.*"
   },
   "author": "Cracker0dks",

public/index.html

@@ -57,11 +57,6 @@
 	        </button>
 	    </div>
 
-	    <div class="btn-group">
-	    	<button id="addImgToCanvasBtn" title="Add an image" type="button" class="whiteboardBtn">
-                <i class="fas fa-image"></i>
-            </button> 
-		</div>
 		<div style="width: 190px;  height: 44px; border: 1px solid green;" class="btn-group">
 			<img style="position: absolute; left: 11px; top: 16px; height:14px; width:130px;" src="./img/slider-background.svg">
 	    	<input title="Thickness" id="whiteboardThicknessSlider" style="position: absolute; left:9px; width: 130px; top: 15px;" type="range" min="1" max="50" value="3">
@@ -73,11 +68,22 @@
 		<div class="btn-group">
 	    	<button id="saveAsImageBtn" title="Save whiteboard as image" type="button" class="whiteboardBtn">
                 <i class="fas fa-image"></i>
-                <i style="position: absolute; top: 6px; left: 9px; color: #000000; background: grey; font-size: 0.8em; " class="fas fa-save"></i>
+                <i style="position: absolute; top: 3px; left: 2px; color: #000000; background: grey; font-size: 0.5em; " class="fas fa-save"></i>
             </button> 
             <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: 5px; left: 7px; color: #000000; background: grey; font-size: 0.8em; " class="fas fa-save"></i>
+                <i style="position: absolute; top: 3px; left: 2px; color: #000000; background: grey; font-size: 0.5em; " class="fas fa-save"></i>
+            </button> 
+		</div>
+
+		<div class="btn-group">
+	    	<button id="addImgToCanvasBtn" title="Upload Image to whiteboard" type="button" class="whiteboardBtn">
+                <i class="fas fa-image"></i>
+                <i style="position: absolute; top: 3px; left: 2px; color: #000000; font-size: 0.5em; " class="fas fa-upload"></i>
+            </button> 
+            <button style="position: relative;" id="uploadJsonBtn" title="Load saved JSON to whiteboard" type="button" class="whiteboardBtn">
+                <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> 
 		</div>
 </body>

public/js/main.js

@@ -97,26 +97,16 @@ $(document).ready(function() {
 
                 var filename = e.originalEvent.dataTransfer.files[0]["name"];
                 if(isImageFileName(filename)) {	
-	                var form = $('<form action="#" enctype="multipart/form-data" method="post"></form>');
+			        var blob = e.originalEvent.dataTransfer.files[0];
-	                var formData = new FormData(form[0]);
+	               	var reader = new window.FileReader();
-	                formData.append("file", e.originalEvent.dataTransfer.files[0]);
+					reader.readAsDataURL(blob);
-			        formData.append("userId", ownSocketId);
+					reader.onloadend = function() {
-			        formData.append("uploadType", "singleFileUpload");
+						console.log("Uploading image!");
-			        formData.append("room", roomImIn["roomName"]);
+					    base64data = reader.result;                
-			        sendFormData(formData, function(msg) {
+					    uploadImgAndAddToWhiteboard(base64data);
-			        	//success callback
+					}
-			        	whiteboard.addImgToCanvasByUrl(document.URL.substr(0,document.URL.lastIndexOf('/'))+"/singlefiles/"+filename);
-			        	writeToChat("Success", "Upload success!");
-			        },  function(err) {
-			        	writeToChat("Error", err);
-			        }, function(progress) {
-			        	writeToChat("Uploading", progress+'%');
-			        	//Upload progress
-			        }, function(progress) {
-			        	//Download progress
-			        });
 			    } else {
-			    	writeToChat("Error", "File must be an image!");
+			    	console.error("File must be an image!");
 			    }
             } else { //File from other browser
             	var fileUrl = e.originalEvent.dataTransfer.getData('URL');
@@ -138,31 +128,11 @@ $(document).ready(function() {
 			    				if(isImageFileName(url)) {
 			    					whiteboard.addImgToCanvasByUrl(url);
 			    				} else {
-			    					var date =  (+new Date());
+			    					var blob = items[i].getAsFile();
-				            		$.ajax({
+						            uploadImgAndAddToWhiteboard(url);
-							            type: 'POST',
-							            url: document.URL.substr(0,document.URL.lastIndexOf('/'))+'/upload',
-							            data: { 
-							                'imagedata': url,
-							                'room' : roomImIn["roomName"],
-							                'name' : "whiteboard",
-							                'date' : date,
-							                'userId' : ownSocketId,
-							                'uploadType' : "singleFileUpload"
-							                },
-							            success: function(msg){
-							            	var filename = username+"_whiteboard_"+date+".png";
-							            	whiteboard.addImgToCanvasByUrl(document.URL.substr(0,document.URL.lastIndexOf('/'))+"/singlefiles/"+filename);
-							                writeToChat("Server", "Image uploaded");
-							                
-							            },
-							            error : function(err) {
-							                writeToChat("Error", "Failed to upload frame: "+JSON.stringify(err));
-							            }
-							        });
 			    				}
 			    			} else {
-			    				writeToChat("Error", "Can only upload imagedata!");
+			    				console.error("Can only upload imagedata!");
 			    			}
 			    		});
 			    	}
@@ -190,6 +160,27 @@ window.addEventListener("drop",function(e){
   e.preventDefault();
 },false);
 
+function uploadImgAndAddToWhiteboard(base64data) {
+	var date =  (+new Date());
+	$.ajax({
+        type: 'POST',
+        url: document.URL.substr(0,document.URL.lastIndexOf('/'))+'/upload',
+        data: { 
+            'imagedata': base64data,
+            'whiteboardId' : whiteboardId,
+            'date' : date
+            },
+        success: function(msg){
+        	var filename = whiteboardId+"_"+date+".png";
+        	whiteboard.addImgToCanvasByUrl(document.URL.substr(0,document.URL.lastIndexOf('/'))+"/uploads/"+filename); //Add image to canvas
+            console.log("Image uploaded!");
+        },
+        error : function(err) {
+            console.error("Failed to upload frame: "+JSON.stringify(err));
+        }
+    });
+}
+
 function isImageFileName(filename) {
     var ending = filename.split(".")[filename.split(".").length-1];
     if(ending.toLowerCase()=="png" || ending.toLowerCase()=="jpg" || ending.toLowerCase()=="jpeg" || ending.toLowerCase()=="gif" || ending.toLowerCase()=="tiff") {
@@ -230,27 +221,7 @@ window.addEventListener("paste", function(e) { //Even do copy & paste from clipb
 					reader.onloadend = function() {
 						console.log("Uploading image!");
 					    base64data = reader.result;                
-					    var date =  (+new Date());
+					    uploadImgAndAddToWhiteboard(base64data);
-	            		$.ajax({
-				            type: 'POST',
-				            url: document.URL.substr(0,document.URL.lastIndexOf('/'))+'/upload',
-				            data: { 
-				                'imagedata': base64data,
-				                'room' : roomImIn["roomName"],
-				                'name' : "whiteboard",
-				                'date' : date,
-				                'userId' : ownSocketId,
-				                'uploadType' : "singleFileUpload"
-				                },
-				            success: function(msg){
-				            	var filename = username+"_whiteboard_"+date+".png";
-				            	whiteboard.addImgToCanvasByUrl(document.URL.substr(0,document.URL.lastIndexOf('/'))+"/singlefiles/"+filename); //Add image to canvas
-				                console.log("Image uploaded!");
-				            },
-				            error : function(err) {
-				                console.error("Failed to upload frame: "+JSON.stringify(err));
-				            }
-				        });
 					}
 	            }
 	         }

server.js

@@ -1,7 +1,8 @@
 var PORT = 8080; //Set port for the app
 
-
+fs = require("fs-extra");
 var express = require('express');
+var formidable = require('formidable'); //form upload processing
 var s_whiteboard = require("./s_whiteboard.js");
 
 var app = express();
@@ -18,6 +19,57 @@ app.get('/loadwhiteboard', function(req, res) {
     res.end();
 });
 
+app.post('/upload', function(req, res) { //File upload
+    var form = new formidable.IncomingForm(); //Receive form
+    var formData = {
+        files : {},
+        fields : {}
+    }
+
+    form.on('file', function(name, file) {
+        formData["files"][file.name] = file;      
+    });
+
+    form.on('field', function(name, value) {
+        formData["fields"][name] = value;
+    });
+
+    form.on('error', function(err) {
+      console.log('File uplaod Error!');
+    });
+
+    form.on('end', function() {
+        progressUploadFormData(formData);
+        res.send("done");
+        //End file upload
+    });
+    form.parse(req);
+});
+
+function progressUploadFormData(formData) {
+    console.log("Progress new Form Data");
+    var fields = formData.fields;
+    var files = formData.files;
+    var whiteboardId = fields["whiteboardId"];
+
+    var name = fields["name"] || "";
+    var date = fields["date"] || (+new Date());
+    var filename = whiteboardId+"_"+date+".png";
+
+    fs.ensureDir("./public/uploads", function(err) {
+        var imagedata = fields["imagedata"];
+        if(imagedata && imagedata != "") { //Save from base64
+            imagedata = imagedata.replace(/^data:image\/png;base64,/, "").replace(/^data:image\/jpeg;base64,/, "");
+            console.log(filename, "uploaded");
+            fs.writeFile('./public/uploads/'+filename, imagedata, 'base64', function(err) {
+                if(err) {
+                    console.log("error", err);
+                }
+            });
+        }
+    });
+}
+
 io.on('connection', function(socket){
     socket.on('drawToWhiteboard', function(content) {
         socket.broadcast.emit('drawToWhiteboard', content);