From b7061259f2cba15f080fd7059f2dc1f81dcdd68f Mon Sep 17 00:00:00 2001 From: rofl256 Date: Thu, 8 Feb 2018 23:16:28 +0100 Subject: [PATCH] fix drag and drop functions --- .gitignore | 2 + package.json | 2 + public/index.html | 20 ++++++---- public/js/main.js | 97 +++++++++++++++++------------------------------ server.js | 54 +++++++++++++++++++++++++- 5 files changed, 104 insertions(+), 71 deletions(-) diff --git a/.gitignore b/.gitignore index 00cbbdf..68677ce 100644 --- a/.gitignore +++ b/.gitignore @@ -57,3 +57,5 @@ typings/ # dotenv environment variables file .env +/public/uploads +/package-lock.json diff --git a/package.json b/package.json index d5ec9d2..712eca8 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,8 @@ ], "dependencies": { "express": "*", + "formidable": "*", + "fs-extra": "*", "socket.io": "2.*" }, "author": "Cracker0dks", diff --git a/public/index.html b/public/index.html index 9a9c4a3..c470db1 100644 --- a/public/index.html +++ b/public/index.html @@ -57,11 +57,6 @@ -
- -
@@ -73,11 +68,22 @@
+
+ +
+ +
diff --git a/public/js/main.js b/public/js/main.js index b8d256e..7c582b9 100644 --- a/public/js/main.js +++ b/public/js/main.js @@ -97,26 +97,16 @@ $(document).ready(function() { var filename = e.originalEvent.dataTransfer.files[0]["name"]; if(isImageFileName(filename)) { - var form = $('
'); - var formData = new FormData(form[0]); - formData.append("file", e.originalEvent.dataTransfer.files[0]); - formData.append("userId", ownSocketId); - formData.append("uploadType", "singleFileUpload"); - formData.append("room", roomImIn["roomName"]); - sendFormData(formData, function(msg) { - //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 - }); + var blob = e.originalEvent.dataTransfer.files[0]; + var reader = new window.FileReader(); + reader.readAsDataURL(blob); + reader.onloadend = function() { + console.log("Uploading image!"); + base64data = reader.result; + uploadImgAndAddToWhiteboard(base64data); + } } 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()); - $.ajax({ - 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)); - } - }); + var blob = items[i].getAsFile(); + uploadImgAndAddToWhiteboard(url); } } 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()); - $.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)); - } - }); + uploadImgAndAddToWhiteboard(base64data); } } } diff --git a/server.js b/server.js index a457415..7c85b6b 100644 --- a/server.js +++ b/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);