drag&drop file upload plus inline-images/inline download are now working

Author: manuelkiessling

application/chatserver/controller/connectionController.js

@@ -2,6 +2,7 @@ Room = require("../../../domain/room.js")["Room"];
 User = require("../../../domain/user.js")["User"];
 UserCommunication = require("../../../domain/communication.js")["UserCommunication"];
 SystemCommunication = require("../../../domain/communication.js")["SystemCommunication"];
+DownloadCommunication = require("../../../domain/communication.js")["DownloadCommunication"];
 
 var room = new Room("default");
 var userId = 0;
@@ -55,5 +56,12 @@ var deliver = function() {
   }
 };
 
+var handleUpload = function(filename, type) {
+  var communication = new DownloadCommunication(filename, type, '/download/' + encodeURIComponent(filename));
+  room.addCommunication(communication);
+  deliver();
+};
+
 exports.attachRenderer = attachRenderer;
 exports.attachServer = attachServer;
+exports.handleUpload = handleUpload;

application/chatserver/renderer/objectRenderer.js

@@ -1,9 +1,11 @@
 var render = function(communication) {
+  var renderedCommunication;
   if (communication instanceof UserCommunication) {
-    var renderedCommunication = { type: 'user', username: communication.user.name, message: communication.message };
-  }
-  else if (communication instanceof SystemCommunication) {
-    var renderedCommunication = { type: 'system', message: communication.message };
+    renderedCommunication = { type: 'user', username: communication.user.name, message: communication.message };
+  } else if (communication instanceof SystemCommunication) {
+    renderedCommunication = { type: 'system', message: communication.message };
+  } else if (communication instanceof DownloadCommunication) {
+    renderedCommunication = { type: 'download', filename: communication.filename, filetype: communication.filetype, url: communication.url };
   }
 
   return renderedCommunication;

application/client/app/index.js

@@ -31,7 +31,7 @@ $(document).ready(function() {
     },
 
     uploadStartedCallback: function(i, file, len) {
-      window.alert('go!');
+      $('#messages').removeClass('filehover');
     },
 
     progressUpdated: function(i, file, progress) {
@@ -43,6 +43,7 @@ $(document).ready(function() {
     },
 
     errorCallback: function(message) {
+      $('#messages').removeClass('filehover');
       window.alert(message);
     }
   });

application/client/css/index.css

@@ -19,7 +19,25 @@
 }
 
 #messages.filehover {
-  background-color: #ff9;
+  background-color: #ffe;
+}
+
+#messages div.message.file {
+  background-color: #ffe;
+  text-align: center;
+  border: 1px solid #eee;
+  border-radius: 8px;
+  padding: 8px;
+  margin: 8px;
+}
+
+#messages div.message.file.inline img {
+  background-color: #fff;
+  height: 50px;
+  border: 1px solid #eee;
+  border-radius: 4px;
+  padding: 8px;
+  margin: 6px;
 }
 
 .input-xlarge {

application/client/lib/chat.js

@@ -21,10 +21,17 @@ bivouac.chat = {
   handleOutput: function (socket, messagesElement) {
     socket.on('hear', function (communication) {
       if (communication.type === 'user') {
-        messagesElement.append('<div class="message"><span class="says"><span class="username">' + $('<div/>').text(communication.username).html() + '</span> says:</span> ' + $('<div/>').text(communication.message).html() + '</div>')
+        messagesElement.append('<div class="message user"><span class="says"><span class="username">' + $('<div/>').text(communication.username).html() + '</span> says:</span> ' + $('<div/>').text(communication.message).html() + '</div>');
       }
       if (communication.type === 'system') {
-        messagesElement.append('<div class="message"><i>' + $('<div/>').text(communication.message).html() + '</i></div>')
+        messagesElement.append('<div class="message system"><i>' + $('<div/>').text(communication.message).html() + '</i></div>');
+      }
+      if (communication.type === 'download') {
+        if (communication.filetype.match(/image\//)) {
+          messagesElement.append('<div class="message file inline"><a target="_blank" href="' + $('<div/>').text(communication.url).html() + '"><img src="' + $('<div/>').text(communication.url).html() + '"/><br /><span class="subtitle">' + $('<div/>').text(communication.filename).html() + '</span></a></div>');
+        } else {
+          messagesElement.append('<div class="message file download">Uploaded file: <a target="_blank" href="' + $('<div/>').text(communication.url).html() + '">' + $('<div/>').text(communication.filename).html() + '</a></div>');
+        }
       }
       messagesElement.scrollTop(99999);
     });

application/client/lib/fileupload.js

@@ -11,7 +11,7 @@ bivouac.fileupload = {
 
     options.dropElement.filedrop({
       paramname: 'file',
-      maxfiles: 1,
+      maxfiles: 5,
       maxfilesize: 5,
       url: options.targetUrl,
       dragEnter: options.dragEnterCallback,

application/filesharing/filesharing.js

@@ -0,0 +1,33 @@
+var util = require('util');
+var fs = require('fs');
+var mime = require('mime');
+var formidable = require("formidable");
+
+var handleUpload = function(request, response, inform) {
+  var form = new formidable.IncomingForm();
+  form.parse(request, function(error, fields, files) {
+    fs.rename(files.file.path, "/tmp/bivouac_upload_" + files.file.name, function(err) {
+      inform(files.file.name, files.file.type);
+      response.writeHead(200, {'content-type': 'text/plain'});
+      response.end('ok');
+    });
+  });
+}
+
+var handleDownload = function(filename, response) {
+  var path = "/tmp/bivouac_upload_" + filename;
+  fs.readFile(path, "binary", function(error, file) {
+    if(error) {
+      response.writeHead(500, {'content-type': 'text/plain'});
+      response.end(error + "\n");
+    } else {
+      response.writeHead(200, {
+        'content-type': mime.lookup(path)
+      });
+      response.end(file, "binary");
+    }
+  });
+}
+
+exports.handleUpload = handleUpload;
+exports.handleDownload = handleDownload;

application/webserver/webserver.js

@@ -1,13 +1,29 @@
 var http = require('http');
-var url = require('url');
+var url  = require('url');
 var path = require('path');
-var fs    = require('fs');
+var fs   = require('fs');
 
-var start = function(documentRoot) {
+var start = function(documentRoot, handleUpload, uploadCallback, handleDownload) {
   var server = http.createServer(function(request, response) {
-    var uri = url.parse(request.url).pathname;
-    var filename = path.join(documentRoot, uri);
-    console.log(filename);
+    var uriPath = url.parse(request.url).pathname;
+    var filename;
+
+    if (uriPath == '/upload' && request.method.toLowerCase() == 'post') {
+      console.log("Handling upload...");
+      handleUpload(request, response, uploadCallback);
+      return;
+    }
+
+    if (uriPath.match(/\/download/) && request.method.toLowerCase() == 'get') {
+      var parts = uriPath.match(/\/download\/(.*)/);
+      filename = parts[1];
+      console.log("Handling download of '" + filename + "'...");
+      handleDownload(filename, response);
+      return;
+    }
+
+    filename = path.join(documentRoot, uriPath);
+    console.log(uriPath + " -> " + filename);
 
     path.exists(filename, function(exists) {
       if (!exists) {

bivouac.js

@@ -1,10 +1,11 @@
 (function () {
+  var filesharing = require("./application/filesharing/filesharing.js");
   var webserver = require("./application/webserver/webserver.js");
   var chatserver = require("./application/chatserver/server/socketioserver.js");
   var renderer = require("./application/chatserver/renderer/objectRenderer.js");
   var connectionController = require("./application/chatserver/controller/connectionController.js");
 
   connectionController.attachRenderer(renderer);
   connectionController.attachServer(chatserver);
-  chatserver.start(webserver.start(process.cwd() + "/application/client"));
+  chatserver.start(webserver.start(process.cwd() + "/application/client", filesharing.handleUpload, connectionController.handleUpload, filesharing.handleDownload));
 })();

domain/communication.js

@@ -7,5 +7,12 @@ var SystemCommunication = function(message) {
   this.message = message;
 }
 
+var DownloadCommunication = function(filename, filetype, url) {
+  this.filename = filename;
+  this.filetype = filetype;
+  this.url = url;
+}
+
 exports.UserCommunication = UserCommunication;
 exports.SystemCommunication = SystemCommunication;
+exports.DownloadCommunication = DownloadCommunication;