Cleaned up file upload implementation and made it use the new model based parent scope.

static/js/directives/bfi.js

@@ -0,0 +1,36 @@
+/*
+ * Spreed WebRTC.
+ * Copyright (C) 2013-2014 struktur AG
+ *
+ * This file is part of Spreed WebRTC.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+define(["bootstrap-file-input"], function() {
+
+	// bfi
+	return ["$timeout", function($timeout) {
+		return {
+			restrict: "A",
+			link: function(scope, element, attrs) {
+				$timeout(function() {
+					// XXX(longsleep): Hack to make translation work.
+					element.bootstrapFileInput();
+				});
+			}
+		}
+	}];
+
+});

static/js/directives/buddypictureupload.js

@@ -18,7 +18,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  *
  */
-define(['jquery', 'underscore', 'text!partials/buddypictureupload.html', 'bootstrap-file-input'], function($, _, template, BootstrapFileInput) {
+define(['jquery', 'underscore', 'text!partials/buddypictureupload.html'], function($, _, template) {
 
 	// buddyPictureUpload
 	return ["$compile", function($compile) {
@@ -110,7 +110,8 @@ define(['jquery', 'underscore', 'text!partials/buddypictureupload.html', 'bootst
 				return {width: width, height: height, x: x, y: y};
 			};
 
-			var writeUploadToCanvas = function(canvas, img) {
+			var writePictureToCanvas = function(canvas) {
+				var img = $scope.prevImage;
 				var dim = getScaledDimensions(img, canvas);
 				var context = canvas.getContext("2d");
 				context.clearRect(0, 0, canvas.width, canvas.height);
@@ -125,19 +126,18 @@ define(['jquery', 'underscore', 'text!partials/buddypictureupload.html', 'bootst
 				$scope.prevImage.style.cssText = null;
 			};
 
-			$scope.usePicture = function() {
-				writeUploadToCanvas($scope.canvasPic, $scope.prevImage);
-				$scope.user.buddyPicture = $scope.canvasPic.toDataURL("image/jpeg");
-				$scope.reset();
-				safeApply($scope);
-			};
-
-			$scope.reset = function() {
+			$scope.cancelPicture = function() {
 				$scope.showUploadPicture = false;
 				$scope.previewUpload = false;
 				clearPicture();
 			};
 
+			$scope.usePicture = function() {
+				writePictureToCanvas($scope.canvasPic);
+				$scope.save();
+				$scope.cancelPicture();
+			};
+
 			$scope.handleUpload = function(event) {
 				var file = event.target.files[0];
 				if (!file) {
@@ -201,8 +201,11 @@ define(['jquery', 'underscore', 'text!partials/buddypictureupload.html', 'bootst
 		}];
 
 		var link = function($scope, $element) {
-			$scope.prevImage = $(".showUploadPicture .preview").get(0);
-			$element.find("#uploadFile").on('change', $scope.handleUpload);
+
+			$scope.prevImage = $element.find("img.preview").get(0);
+
+			// Bind change event of file upload form.
+			$element.find("input[type=file]").on("change", $scope.handleUpload);
 
 			var intervalNum = {
 				num: null
@@ -271,14 +274,11 @@ define(['jquery', 'underscore', 'text!partials/buddypictureupload.html', 'bootst
 			$element.find("#larger").on('mouseup', null, {intervalNum: intervalNum}, changeImage);
 			$element.find("#smaller").on('mouseup', null, {intervalNum: intervalNum}, changeImage);
 
-			// Give translation time to transform title text of [input=file] instances before bootstrap.file-input parses dom.
-			setTimeout(function() {
-				$('#uploadFile').bootstrapFileInput();
-			}, 0);
 		};
 
 		return {
 			restrict: 'E',
+			require: '^buddyPictureCapture',
 			replace: true,
 			template: template,
 			controller: controller,

static/js/directives/directives.js

@@ -42,7 +42,8 @@ define([
 	'directives/pdfcanvas',
 	'directives/odfcanvas',
 	'directives/presentation',
-	'directives/youtubevideo',], function(_, onEnter, onEscape, statusMessage, buddyList, buddyPictureCapture, buddyPictureUpload, settings, chat, audioVideo, usability, audioLevel, fileInfo, screenshare, roomBar, socialShare, page, contactRequest, defaultDialog, pdfcanvas, odfcanvas, presentation, youtubevideo) {
+	'directives/youtubevideo',
+	'directives/bfi'], function(_, onEnter, onEscape, statusMessage, buddyList, buddyPictureCapture, buddyPictureUpload, settings, chat, audioVideo, usability, audioLevel, fileInfo, screenshare, roomBar, socialShare, page, contactRequest, defaultDialog, pdfcanvas, odfcanvas, presentation, youtubevideo, bfi) {
 
 	var directives = {
 		onEnter: onEnter,
@@ -66,7 +67,8 @@ define([
 		pdfcanvas: pdfcanvas,
 		odfcanvas: odfcanvas,
 		presentation: presentation,
-		youtubevideo: youtubevideo
+		youtubevideo: youtubevideo,
+		bfi: bfi
 	};
 
 	var initialize = function(angModule) {

static/js/main.js

@@ -131,7 +131,7 @@ require.config({
 		},
 		'bootstrap-file-input': {
 			deps: ['jquery'],
-			exports: 'BootstrapFileInput'
+			exports: '$'
 		},
 	}
 });

static/partials/buddypictureupload.html

@@ -24,10 +24,10 @@
 	<div class="alert alert-warning" ng-if="error.image">{{_('The file is not an image.')}}<button type="button" class="close" ng-click="error.image = null"><span>&times;</span></button></div>
 	<div class="alert alert-warning" ng-if="error.size">{{_('The file is too large. Max. %d MB.', maxUploadMb)}}<button type="button" class="close" ng-click="error.size = null"><span>&times;</span></button></div>
 	<p>
-		<input id="uploadFile" class="btn btn-success" type="file" title="{{_('Select file')}}" data-filename-placement="outside"/>
+		<input class="btn btn-success" bfi type="file" title="{{_('Select file')}}" data-filename-placement="outside"/>
 	</p>
 	<p>
-		<a class="btn btn-small btn-default" ng-click="reset()"> {{_('Cancel')}}</a>
+		<a class="btn btn-small btn-default" ng-click="cancelPicture()"> {{_('Cancel')}}</a>
 		<a class="btn btn-small btn-primary" ng-click="usePicture()" ng-disabled="!imgData"> {{_('Set as Profile Picture')}}</a>
 	</p>
 </div>