Add file events.

static/js/directives/buddypictureupload.js

@@ -26,13 +26,51 @@ define(['jquery', 'underscore', 'text!partials/buddypictureupload.html'], functi
 		var controller = ['$scope', 'safeApply', '$timeout', '$q', function($scope, safeApply, $timeout, $q) {
 
 			$scope.showUploadPicture = false;
+			$scope.previewUpload = false;
+
+			$scope.handleUpload = function(event) {
+				var file = event.target.files[0];
+				console.log('file', file);
+
+				if(!file.type.match(/image/)) {
+					error({event: {target: {error: {name: 'NotImage'}}}});
+				}
+
+				var reader = new FileReader();
+				reader.readAsArrayBuffer(file);
+
+				var progress = function(event) {
+					console.log('file progress', event);
+				};
+				var load = function(event) {
+					console.log('file load', event);
+					var fileBuffer = event.target.result;
+					// var context = $scope.uploadPrev.getContext('2d');
+					// context.putImageData(fileBuffer, 0, 0);
+					// $scope.previewUpload = true;
+				};
+				var error = function(event) {
+					console.log('file error', event);
+					if(event.target.error.name == 'NotReadableError') {
+						// file couldn't be read
+					}
+					if(event.target.error.name == 'NotImage') {
+						// file is not an image
+					}
+				};
+
+				reader.onprogress = progress;
+				reader.onload = load;
+				reader.onerror = error;
+			};
 
 		}];
 
 		var link = function($scope, $element) {
 
-			$scope.canvasUpload = $element.find("canvas.uploadPrev").get(0);
-			$($scope.canvasUpload).attr($scope.captureSize);
+			$element.find("#uploadFile").on('change', $scope.handleUpload);
+			$scope.uploadPrev = $element.find("canvas.uploadPrev").get(0);
+			$($scope.uploadPrev).attr($scope.captureSize);
 
 		};
 

static/partials/buddypictureupload.html

@@ -3,7 +3,7 @@
 		<canvas class="uploadPrev hidden"></canvas>
 		<img class="preview" ng-class="{previewUpload: previewUpload}" ng-show="previewUpload" ng-src="{{previewUpload}}" />
 		<p>Please choose a picture to upload</p>
-		<div><input type="file"></div>
+		<div><input id="uploadFile" type="file"></div>
 		<br>
 	</div>
 	<a class="btn btn-small btn-default" ng-click="showUploadPicture = false"> {{_('Cancel')}}</a>