WebDev
/
VersaWhiteboard
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix drag and drop functions

This commit is contained in:
rofl256 2018-02-08 23:16:28 +01:00
parent 18cd56ab26
commit b7061259f2
5 changed files with 104 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

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

2
package.json
View File

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

20
public/index.html
View File

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

97
public/js/main.js
View File

@ -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 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);
}
}
}

54
server.js
View File

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