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

fix drag and drop functions

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

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