AngularJS Promises

image.html

<div ng-controller="ImageCtrl">
	<div class="ddarea" ng-file-drop="onFileDropped($files)" ng-file-drag-over-class="dropping">
		<p>Drag & Drop your design image here</p>
	</div>
	
	<div class="layers">
		<div class="layer" ng-class="{ active : layer.active }" ng-repeat="layer in layers">
			<div style="background-image: url({{layer.thumb}})"></div>
			<a ng-click="removeLayer(layer)">Remove</a>
		</div>
	</div>
	
	<div class="canvas">
		<canvas></canvas>
	</div>
</div>

image.js

angular.module('app')
.service('FileUploaderService', ['$upload', function($upload) {
	var _upload: function(file) {
		return $upload.upload({
			url: '/upload',
			method: 'POST',
			file: file
		})
	};
	
	return {
		upload: _upload
	};
}])
.controller('imageCtrl', [function() {
	$scope.layers = [];
	$scope.onFileDropped = function($files) {
		var file = $files[0];
		if (file !== undefined) {
			var uploadPromise = FileUploaderService.upload(file);
			uploadPromise.error(function(response) {
				$scope.notify("Upload error: " + response.message);
			});
			
			var fileReader = new FileReader;
			
			fileReader.onload = function() {
				var layer = { 
					active: false,
					image = fileReader.result
				};
				$scope.createNewLayer(layer, uploadPromise);
				$scope.addImageToCanvas(layer, uploadPromise);
			};
			fileReader.readAsDataURL(file);
		}
	};
	
	$scope.createNewLayer = function(layer, uploadPromise) {
		$scope.layers.push(layer);
		uploadPromise.success(function(response){
			layer.thumb = response.thumb;
		});
		uploadPromise.error(function(response) {
			$scope.layers.splice(_.indexOf($scope.layers, layer), 1);
		});
	};
	
	$scope.addImageToCanvas = function(layer) {
		// code to add the image to the canvas
		uploadPromise.error(function(response) {
			// Remove the layer from the canvas
		});
	};
}]);