first version of webdav save
This commit is contained in:
raphael
parent
b9db9ab58b
commit
eadfb23676
4172
package-lock.json
generated
4172
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "Whiteboard",
|
||||
"name": "whiteboard",
|
||||
"version": "1.0.0",
|
||||
"description": "Collaborative Whiteboard / Sketchboard",
|
||||
"main": "server.js",
|
||||
@ -23,7 +23,8 @@
|
||||
"formidable": "1.*",
|
||||
"fs-extra": "7.*",
|
||||
"jsdom": "^14.0.0",
|
||||
"socket.io": "2.*"
|
||||
"socket.io": "2.*",
|
||||
"webdav": "^2.8.0"
|
||||
},
|
||||
"author": "Cracker0dks",
|
||||
"license": "MIT"
|
||||
|
||||
@ -74,4 +74,12 @@ button {
|
||||
|
||||
.textBox.active>.removeIcon, .textBox.active>.moveIcon {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.modalBtn {
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
border: 0px;
|
||||
min-width: 50px;
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -99,6 +99,13 @@
|
||||
<i style="position: absolute; top: 3px; left: 2px; color: #000000; font-size: 0.5em; "
|
||||
class="fas fa-save"></i>
|
||||
</button>
|
||||
<button style="position: relative; display: none;" id="uploadWebDavBtn" title="Save whiteboard to webdav"
|
||||
type="button" class="whiteboardBtn">
|
||||
|
||||
<i class="fas fa-globe"></i>
|
||||
<i style="position: absolute; top: 3px; left: 2px; color: #000000; font-size: 0.5em; "
|
||||
class="fas fa-save"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="btn-group">
|
||||
|
||||
@ -31,7 +31,7 @@ signaling_socket.on('connect', function () {
|
||||
});
|
||||
|
||||
signaling_socket.on('wrongAccessToken', function () {
|
||||
if(!accessDenied) {
|
||||
if (!accessDenied) {
|
||||
accessDenied = true;
|
||||
showBasicAlert("Access denied! Wrong accessToken!")
|
||||
}
|
||||
@ -45,6 +45,10 @@ signaling_socket.on('connect', function () {
|
||||
});
|
||||
|
||||
$(document).ready(function () {
|
||||
if (getQueryVariable("webdav") == "true") {
|
||||
$("#uploadWebDavBtn").show();
|
||||
}
|
||||
|
||||
whiteboard.loadWhiteboard("#whiteboardContainer", { //Load the whiteboard
|
||||
whiteboardId: whiteboardId,
|
||||
username: myUsername,
|
||||
@ -164,6 +168,80 @@ $(document).ready(function () {
|
||||
}, 0);
|
||||
});
|
||||
|
||||
$("#uploadWebDavBtn").click(function () {
|
||||
if ($(".webdavUploadBtn").length > 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
var webdavserver = localStorage.getItem('webdavserver') || ""
|
||||
var webdavpath = localStorage.getItem('webdavpath') || "/"
|
||||
var webdavusername = localStorage.getItem('webdavusername') || ""
|
||||
var webdavpassword =localStorage.getItem('webdavpassword') || ""
|
||||
var webDavHtml = $('<div>' +
|
||||
'<table>' +
|
||||
'<tr>' +
|
||||
'<td>Webdav-Server:</td>' +
|
||||
'<td><input class="webdavserver" type="text" value="'+webdavserver+'" placeholder="https://yourserver.com/remote.php/webdav/"></td>' +
|
||||
'<td></td>' +
|
||||
'</tr>' +
|
||||
'<tr>' +
|
||||
'<td>Path:</td>' +
|
||||
'<td><input class="webdavpath" type="text" placeholder="folder" value="'+webdavpath+'"></td>' +
|
||||
'<td style="font-size: 0.7em;"><i>path always have to start & end with "/"</i></td>' +
|
||||
'</tr>' +
|
||||
'<tr>' +
|
||||
'<td>Username:</td>' +
|
||||
'<td><input class="webdavusername" type="text" value="'+webdavusername+'" placeholder="username"></td>' +
|
||||
'<td style="font-size: 0.7em;"></td>' +
|
||||
'</tr>' +
|
||||
'<tr>' +
|
||||
'<td>Password:</td>' +
|
||||
'<td><input class="webdavpassword" type="password" value="'+webdavpassword+'" placeholder="password"></td>' +
|
||||
'<td style="font-size: 0.7em;"></td>' +
|
||||
'</tr>' +
|
||||
'<tr>' +
|
||||
'<td style="font-size: 0.7em;" colspan="3">Note: You have to generate and use app credentials if you have 2 Factor Auth activated on your dav/nextcloud server!</td>' +
|
||||
'</tr>' +
|
||||
'<tr>' +
|
||||
'<td></td>' +
|
||||
'<td colspan="2"><span class="loadingWebdavText" style="display:none;">Saving to webdav, please wait...</span><button class="modalBtn webdavUploadBtn"><i class="fas fa-upload"></i> Start Upload</button></td>' +
|
||||
'</tr>' +
|
||||
'</table>' +
|
||||
'</div>');
|
||||
webDavHtml.find(".webdavUploadBtn").click(function () {
|
||||
var webdavserver = webDavHtml.find(".webdavserver").val();
|
||||
localStorage.setItem('webdavserver', webdavserver);
|
||||
var webdavpath = webDavHtml.find(".webdavpath").val();
|
||||
localStorage.setItem('webdavpath', webdavpath);
|
||||
var webdavusername = webDavHtml.find(".webdavusername").val();
|
||||
localStorage.setItem('webdavusername', webdavusername);
|
||||
var webdavpassword = webDavHtml.find(".webdavpassword").val();
|
||||
localStorage.setItem('webdavpassword', webdavpassword);
|
||||
var base64data = whiteboard.getImageDataBase64();
|
||||
var webdavaccess = {
|
||||
webdavserver: webdavserver,
|
||||
webdavpath: webdavpath,
|
||||
webdavusername: webdavusername,
|
||||
webdavpassword: webdavpassword
|
||||
}
|
||||
webDavHtml.find(".loadingWebdavText").show();
|
||||
webDavHtml.find(".webdavUploadBtn").hide();
|
||||
saveWhiteboardToWebdav(base64data, webdavaccess, function (err) {
|
||||
if (err) {
|
||||
webDavHtml.find(".loadingWebdavText").hide();
|
||||
webDavHtml.find(".webdavUploadBtn").show();
|
||||
} else {
|
||||
webDavHtml.parents(".basicalert").remove();
|
||||
}
|
||||
});
|
||||
})
|
||||
showBasicAlert(webDavHtml, {
|
||||
header: "Save to Webdav",
|
||||
okBtnText: "cancel",
|
||||
headercolor: "#0082c9"
|
||||
})
|
||||
});
|
||||
|
||||
// upload json containing steps
|
||||
$("#uploadJsonBtn").click(function () {
|
||||
$("#myFile").click();
|
||||
@ -257,7 +335,7 @@ $(document).ready(function () {
|
||||
showBasicAlert("File must be an image!");
|
||||
}
|
||||
} else { //File from other browser
|
||||
|
||||
|
||||
var fileUrl = e.originalEvent.dataTransfer.getData('URL');
|
||||
var imageUrl = e.originalEvent.dataTransfer.getData('text/html');
|
||||
var rex = /src="?([^"\s]+)"?\s*/;
|
||||
@ -330,6 +408,36 @@ function uploadImgAndAddToWhiteboard(base64data) {
|
||||
});
|
||||
}
|
||||
|
||||
function saveWhiteboardToWebdav(base64data, webdavaccess, callback) {
|
||||
var date = (+new Date());
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
url: document.URL.substr(0, document.URL.lastIndexOf('/')) + '/upload',
|
||||
data: {
|
||||
'imagedata': base64data,
|
||||
'whiteboardId': whiteboardId,
|
||||
'date': date,
|
||||
'at': accessToken,
|
||||
'webdavaccess': JSON.stringify(webdavaccess)
|
||||
},
|
||||
success: function (msg) {
|
||||
showBasicAlert("Whiteboard was saved to Webdav!", {
|
||||
headercolor: "#5c9e5c"
|
||||
});
|
||||
console.log("Image uploaded for webdav!");
|
||||
callback();
|
||||
},
|
||||
error: function (err) {
|
||||
if (err.status == 403) {
|
||||
showBasicAlert("Could not connect to Webdav folder! Please check the credentials and paths and try again!");
|
||||
} else {
|
||||
showBasicAlert("Unknown Webdav error! ", err);
|
||||
}
|
||||
callback(err);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// verify if filename refers to an image
|
||||
function isImageFileName(filename) {
|
||||
var extension = filename.split(".")[filename.split(".").length - 1];
|
||||
@ -357,6 +465,9 @@ function isValidImageUrl(url, callback) {
|
||||
|
||||
// handle pasting from clipboard
|
||||
window.addEventListener("paste", function (e) {
|
||||
if($(".basicalert").length>0) {
|
||||
return;
|
||||
}
|
||||
if (e.clipboardData) {
|
||||
var items = e.clipboardData.items;
|
||||
var imgItemFound = false;
|
||||
@ -379,22 +490,33 @@ window.addEventListener("paste", function (e) {
|
||||
}
|
||||
}
|
||||
|
||||
if (!imgItemFound && whiteboard.tool!="text") {
|
||||
if (!imgItemFound && whiteboard.tool != "text") {
|
||||
showBasicAlert("Please Drag&Drop the image into the Whiteboard. (Browsers don't allow copy+past from the filesystem directly)");
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function showBasicAlert(text) {
|
||||
var alertHtml = $('<div style="position:absolute; top:0px; left:0px; width:100%; top:70px; font-family: monospace;">' +
|
||||
'<div style="width: 30%; margin: auto; background: #aaaaaa; border-radius: 5px; font-size: 1.2em; border: 1px solid gray;">'+
|
||||
'<div style="border-bottom: 1px solid #676767; background: #d25d5d; padding-left: 5px; font-size: 0.8em;">INFO MESSAGE</div>'+
|
||||
'<div style="padding: 10px;">' + text + '</div>'+
|
||||
'<div style="height: 20px; padding: 10px;"><button style="float: right; padding: 5px; border-radius: 5px; border: 0px; min-width: 50px; cursor: pointer;">Ok</button></div>'+
|
||||
function showBasicAlert(html, newOptions) {
|
||||
var options = {
|
||||
header: "INFO MESSAGE",
|
||||
okBtnText: "Ok",
|
||||
headercolor: "#d25d5d"
|
||||
}
|
||||
if (newOptions) {
|
||||
for (var i in newOptions) {
|
||||
options[i] = newOptions[i];
|
||||
}
|
||||
}
|
||||
var alertHtml = $('<div class="basicalert" style="position:absolute; top:0px; left:0px; width:100%; top:70px; font-family: monospace;">' +
|
||||
'<div style="width: 30%; margin: auto; background: #aaaaaa; border-radius: 5px; font-size: 1.2em; border: 1px solid gray;">' +
|
||||
'<div style="border-bottom: 1px solid #676767; background: ' + options["headercolor"] + '; padding-left: 5px; font-size: 0.8em;">' + options["header"] + '</div>' +
|
||||
'<div style="padding: 10px;" class="htmlcontent"></div>' +
|
||||
'<div style="height: 20px; padding: 10px;"><button class="modalBtn okbtn" style="float: right;">' + options["okBtnText"] + '</button></div>' +
|
||||
'</div>' +
|
||||
'</div>');
|
||||
alertHtml.find(".htmlcontent").append(html);
|
||||
$("body").append(alertHtml);
|
||||
alertHtml.find("button").click(function () {
|
||||
alertHtml.find(".okbtn").click(function () {
|
||||
alertHtml.remove();
|
||||
})
|
||||
}
|
||||
|
||||
86
server.js
86
server.js
@ -1,6 +1,7 @@
|
||||
var PORT = 8080; //Set port for the app
|
||||
var accessToken = ""; //Can be set here or as start parameter (node server.js --accesstoken=MYTOKEN)
|
||||
var disableSmallestScreen = false; //Can be set to true if you dont want to show (node server.js --disablesmallestscreen=true)
|
||||
var enableWebDavSave = false; //Can be set to true if you want to allow webdav save (node server.js --webdavsave=true)
|
||||
|
||||
var fs = require("fs-extra");
|
||||
var express = require('express');
|
||||
@ -11,6 +12,8 @@ const { JSDOM } = require('jsdom');
|
||||
const window = (new JSDOM('')).window;
|
||||
const DOMPurify = createDOMPurify(window);
|
||||
|
||||
const { createClient } = require("webdav");
|
||||
|
||||
var s_whiteboard = require("./s_whiteboard.js");
|
||||
|
||||
var app = express();
|
||||
@ -26,6 +29,9 @@ if (process.env.accesstoken) {
|
||||
if (process.env.disablesmallestscreen) {
|
||||
disablesmallestscreen = true;
|
||||
}
|
||||
if (process.env.webdavsave) {
|
||||
enableWebDavSave = true;
|
||||
}
|
||||
|
||||
var startArgs = getArgs();
|
||||
if (startArgs["accesstoken"]) {
|
||||
@ -34,6 +40,9 @@ if (startArgs["accesstoken"]) {
|
||||
if (startArgs["disablesmallestscreen"]) {
|
||||
disableSmallestScreen = true;
|
||||
}
|
||||
if (startArgs["webdavsave"]) {
|
||||
enableWebDavSave = true;
|
||||
}
|
||||
|
||||
if (accessToken !== "") {
|
||||
console.log("AccessToken set to: " + accessToken);
|
||||
@ -76,8 +85,18 @@ app.post('/upload', function (req, res) { //File upload
|
||||
|
||||
form.on('end', function () {
|
||||
if (accessToken === "" || accessToken == formData["fields"]["at"]) {
|
||||
progressUploadFormData(formData);
|
||||
res.send("done");
|
||||
progressUploadFormData(formData, function (err) {
|
||||
if (err) {
|
||||
if (err == "403") {
|
||||
res.status(403);
|
||||
} else {
|
||||
res.status(500);
|
||||
}
|
||||
res.end();
|
||||
} else {
|
||||
res.send("done");
|
||||
}
|
||||
});
|
||||
} else {
|
||||
res.status(401); //Unauthorized
|
||||
res.end();
|
||||
@ -87,7 +106,7 @@ app.post('/upload', function (req, res) { //File upload
|
||||
form.parse(req);
|
||||
});
|
||||
|
||||
function progressUploadFormData(formData) {
|
||||
function progressUploadFormData(formData, callback) {
|
||||
console.log("Progress new Form Data");
|
||||
var fields = escapeAllContentStrings(formData.fields);
|
||||
var files = formData.files;
|
||||
@ -96,7 +115,12 @@ function progressUploadFormData(formData) {
|
||||
var name = fields["name"] || "";
|
||||
var date = fields["date"] || (+new Date());
|
||||
var filename = whiteboardId + "_" + date + ".png";
|
||||
|
||||
var webdavaccess = fields["webdavaccess"] || false;
|
||||
try {
|
||||
webdavaccess = JSON.parse(webdavaccess);
|
||||
} catch (e) {
|
||||
webdavaccess = false;
|
||||
}
|
||||
fs.ensureDir("./public/uploads", function (err) {
|
||||
if (err) {
|
||||
console.log("Could not create upload folder!", err);
|
||||
@ -109,14 +133,61 @@ function progressUploadFormData(formData) {
|
||||
fs.writeFile('./public/uploads/' + filename, imagedata, 'base64', function (err) {
|
||||
if (err) {
|
||||
console.log("error", err);
|
||||
callback(err);
|
||||
} else {
|
||||
if (webdavaccess) { //Save image to webdav
|
||||
if (enableWebDavSave) {
|
||||
saveImageToWebdav('./public/uploads/' + filename, filename, webdavaccess, function (err) {
|
||||
if (err) {
|
||||
console.log("error", err);
|
||||
callback(err);
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
})
|
||||
} else {
|
||||
callback("Webdav is not enabled on the server!");
|
||||
}
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
callback("no imagedata!");
|
||||
console.log("No image Data found for this upload!", name);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function saveImageToWebdav(imagepath, filename, webdavaccess, callback) {
|
||||
if (webdavaccess) {
|
||||
var webdavserver = webdavaccess["webdavserver"] || "";
|
||||
var webdavpath = webdavaccess["webdavpath"] || "/";
|
||||
var webdavusername = webdavaccess["webdavusername"] || "";
|
||||
var webdavpassword = webdavaccess["webdavpassword"] || "";
|
||||
|
||||
const client = createClient(
|
||||
webdavserver,
|
||||
{
|
||||
username: webdavusername,
|
||||
password: webdavpassword
|
||||
}
|
||||
)
|
||||
client.getDirectoryContents(webdavpath).then((items) => {
|
||||
var cloudpath = webdavpath+ '' + filename;
|
||||
console.log("webdav saving to:", cloudpath);
|
||||
fs.createReadStream(imagepath).pipe(client.createWriteStream(cloudpath));
|
||||
callback();
|
||||
}).catch((error) => {
|
||||
callback("403");
|
||||
console.log("Could not connect to webdav!")
|
||||
});
|
||||
} else {
|
||||
callback("Error: no access data!")
|
||||
}
|
||||
}
|
||||
|
||||
var smallestScreenResolutions = {};
|
||||
io.on('connection', function (socket) {
|
||||
var whiteboardId = null;
|
||||
@ -211,4 +282,9 @@ function getArgs() {
|
||||
}
|
||||
})
|
||||
return args
|
||||
}
|
||||
}
|
||||
|
||||
process.on('unhandledRejection', error => {
|
||||
// Will print "unhandledRejection err is not defined"
|
||||
console.log('unhandledRejection', error.message);
|
||||
})
|
||||
Loading…
Reference in New Issue
Block a user