Implemented upload file to chat with file selector.

static/js/directives/chat.js

@@ -296,10 +296,6 @@ define(['underscore', 'text!partials/chat.html', 'text!partials/chatroom.html'],
 						subscope.doCall = function() {
 							mediaStream.webrtc.doCall(subscope.id);
 						};
-						subscope.doUpload = function() {
-							// TODO(longsleep): implement me
-							console.log("doUpload not yet implemented.");
-						};
 						subscope.doClear = function() {
 							subscope.$broadcast("clear");
 						};
@@ -376,11 +372,8 @@ define(['underscore', 'text!partials/chat.html', 'text!partials/chatroom.html'],
 								});
 							}
 
-							// Support drag and drop file uploads in Chat.
-							var namespace = "file_" + scope.id;
-							var binder = fileUpload.bindDrop(namespace, clonedElement, _.bind(function(files) {
-								console.log("File dragged", files);
-								_.each(files, _.bind(function(f) {
+							var sendFiles = function(files) {
+								_.each(files, function(f) {
 									var info = $.extend({
 										id: f.id
 									}, f.info);
@@ -388,9 +381,20 @@ define(['underscore', 'text!partials/chat.html', 'text!partials/chatroom.html'],
 									$scope.sendChat(subscope.id, "File", {
 										FileInfo: info
 									});
-								}, this));
+								});
+							};
+
+							// Support drag and drop file uploads in Chat.
+							var namespace = "file_" + scope.id;
+							var binderDrop = fileUpload.bindDrop(namespace, clonedElement, _.bind(function(files) {
+								console.log("File dragged", files);
+								sendFiles(files);
+							}, this));
+							var binderClick = fileUpload.bindClick(namespace, $(".btn-fileupload", clonedElement), _.bind(function(files) {
+								console.log("Click found files", files);
+								sendFiles(files);
 							}, this));
-							binder.namespace = function() {
+							binderDrop.namespace = binderClick.namespace = function() {
 								// Inject own id into namespace.
 								return namespace + "_" + scope.myid;
 							};

static/js/services/fileupload.js

@@ -130,6 +130,55 @@ define(["jquery", "underscore", "webrtc.adapter"], function($, _) {
 			this.supported = fileTransfer.supported;
 		};
 
+		FileUpload.prototype.bindClick = function(namespace, element, cb) {
+
+			// Helper to allow later modifications.
+			var binder = {
+				namespace: function() {
+					return namespace;
+				}
+			}
+
+			$(element).on("click", _.bind(function(event) {
+
+				event.preventDefault();
+
+				if (!this.supported) {
+					alertify.dialog.alert(translation._("Your browser does not support file transfer."));
+					return;
+				}
+
+				// Create new input.
+				var input = $('<input type="file" multiple>');
+				input.css({
+					visibility: "hidden",
+					position: "absolute",
+					left: "0px",
+					top: "0px",
+					height: "0px",
+					width: "0px"
+				});
+				input.change(function(ev) {
+					var dataTransfer = ev.target;
+					var files = [];
+					var i;
+					for (i = 0; i < dataTransfer.files.length; i++) {
+						files.push(fileData.createFile(binder.namespace(), dataTransfer.files[i]));
+					}
+					//console.log("click event", dataTransfer, files, files.length);
+					if (cb) {
+						cb(files);
+					}
+				});
+				input.click();
+
+			}, this));
+
+			// Return helper.
+			return binder;
+
+		};
+
 		FileUpload.prototype.bindDrop = function(namespace, element, cb) {
 			//console.log("Binding file upload drop to", namespace, element);
 

static/partials/chatroom.html

@@ -3,7 +3,7 @@
     <div class="chatmenu">
         <div class="btn-group">
             <button ng-if="!isgroupchat" class="btn btn-sm btn-primary" title="{{_('Start video call')}}" ng-click="doCall()"><i class="fa fa-phone fa-fw"></i></button>
-            <button class="btn btn-sm btn-primary" title="{{_('Upload files')}}" ng-click="doUpload()"><i class="fa fa-upload fa-fw"></i></button>
+            <button class="btn btn-sm btn-primary btn-fileupload" title="{{_('Upload files')}}"><i class="fa fa-upload fa-fw"></i></button>
         </div>
         <div class="btn-group pull-right">
             <button class="btn btn-sm btn-default" title="{{_('Clear chat')}}" ng-click="doClear()"><i class="fa fa-eraser fa-fw"></i></button>