Browse Source

Implemented upload file to chat with file selector.

pull/71/head
Simon Eisenmann 11 years ago
parent
commit
9326547165
  1. 24
      static/js/directives/chat.js
  2. 49
      static/js/services/fileupload.js
  3. 2
      static/partials/chatroom.html

24
static/js/directives/chat.js

@ -296,10 +296,6 @@ define(['underscore', 'text!partials/chat.html', 'text!partials/chatroom.html'], @@ -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'], @@ -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'], @@ -388,9 +381,20 @@ define(['underscore', 'text!partials/chat.html', 'text!partials/chatroom.html'],
$scope.sendChat(subscope.id, "File", {
FileInfo: info
});
});
};
// 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;
};

49
static/js/services/fileupload.js

@ -130,6 +130,55 @@ define(["jquery", "underscore", "webrtc.adapter"], function($, _) { @@ -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);

2
static/partials/chatroom.html

@ -3,7 +3,7 @@ @@ -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>

Loading…
Cancel
Save