tahoeRobbo · August 29, 2015 14:23 · Nov 6, 2013 · Nov 6, 2013 · Nov 6, 2013 · Nov 6, 2013
diff --git a/ImageUpload.js b/ImageUpload.js
@@ -1,6 +1,6 @@
 angular.module('app')
-.controller('ImageUpload', ['$scope', 'fpAnnounce', '$log',
-	function ImageUpload($scope, fpAnnounce, $log) {
+.controller('ImageUpload', ['$scope', '$log',
+	function ImageUpload($scope, $log) {
 		$scope.upload_image = function (image) {
 			if (!image.valid) return;
 

diff --git a/ImageUpload.js b/ImageUpload.js
@@ -0,0 +1,42 @@
+angular.module('app')
+.controller('ImageUpload', ['$scope', 'fpAnnounce', '$log',
+	function ImageUpload($scope, fpAnnounce, $log) {
+		$scope.upload_image = function (image) {
+			if (!image.valid) return;
+
+			var imagesRef, safename, imageUpload;
+
+			image.isUploading = true;
+			imageUpload = {
+				isUploading: true,
+				data: image.data,
+				thumbnail: image.thumbnail,
+				name: image.filename,
+				author: {
+					provider: $scope.auth.user.provider,
+					id: $scope.auth.user.id
+				}
+			};
+
+			safename = imageUpload.name.replace(/\.|\#|\$|\[|\]|-|\//g, "");
+			imagesRef = new Firebase($scope.firebaseUrl + '/images');
+
+			imagesRef.child(safename).set(imageUpload, function (err) {
+				if (!err) {
+					imagesRef.child(safename).child('isUploading').remove();
+					$scope.$apply(function () {
+						$scope.status = 'Your image "' + image.filename + '" has been successfully uploaded!';
+						if ($scope.uploaded_callback !== undefined) {
+							$scope.uploaded_callback(angular.copy(imageUpload));
+						}
+						image.isUploading = false;
+						image.data = undefined;
+						image.filename = undefined;
+					});
+				}else{
+					$scope.error = 'There was an error while uploading your image: ' + err;
+				}
+			});
+		};
+	}
+]);
diff --git a/fp-image-upload.js b/fp-image-upload.js
@@ -1,4 +1,4 @@
-angular.module('firepress')
+angular.module('app')
 .directive('fbImageUpload', [function() {
 	return {
 		link: function(scope, element, attrs) {

diff --git a/fp-src.js b/fp-src.js
@@ -1,4 +1,4 @@
-angular.module('firepress')
+angular.module('app')
 .directive('fbSrc', ['$log', function ($log) {
 	// Used to embed images stored in Firebase
 

diff --git a/template.html b/template.html
@@ -1,4 +1,4 @@
-<div class="fb-image-upload">
+<div ng-controller="ImageUpload" class="fb-image-upload">
 	<form ng-submit="upload_image(image)">
 		<div class="fb-error" ng-show="error">{{error}}</div>
 		<div class="fb-inputs" ng-hide="image.isUploading">

diff --git a/fp-image-upload.js b/fp-image-upload.js
@@ -1,5 +1,5 @@
 angular.module('firepress')
-.directive('fpImageUpload', [function() {
+.directive('fbImageUpload', [function() {
 	return {
 		link: function(scope, element, attrs) {
 			// Modified from https://developer.mozilla.org/en-US/docs/Web/API/FileReader

diff --git a/fp-src.js b/fp-src.js
@@ -1,5 +1,5 @@
 angular.module('firepress')
-.directive('fpSrc', ['$log', function ($log) {
+.directive('fbSrc', ['$log', function ($log) {
 	// Used to embed images stored in Firebase
 
 	/*

diff --git a/template.html b/template.html
@@ -1,11 +1,11 @@
-<div ng-controller="ImageUpload" class="fp-image-upload">
+<div class="fb-image-upload">
 	<form ng-submit="upload_image(image)">
-		<div class="fp-error" ng-show="error">{{error}}</div>
-		<div class="fp-inputs" ng-hide="image.isUploading">
-			<input class="fp-image-upload" fp-image-upload class="fp-input" type="file" name="image"/>
-			<input class="fp-submit" type="submit" value="Upload Image" ng-show="image.valid"/>
+		<div class="fb-error" ng-show="error">{{error}}</div>
+		<div class="fb-inputs" ng-hide="image.isUploading">
+			<input class="fb-image-upload" fb-image-upload class="fb-input" type="file" name="image"/>
+			<input class="fb-submit" type="submit" value="Upload Image" ng-show="image.valid"/>
 		</div>
-		<div class="fp-uploading" ng-show="image.isUploading">
+		<div class="fb-uploading" ng-show="image.isUploading">
 			Uploading...
 		</div>
 	</form>

diff --git a/template.html b/template.html
@@ -1,7 +1,6 @@
 <div ng-controller="ImageUpload" class="fp-image-upload">
 	<form ng-submit="upload_image(image)">
 		<div class="fp-error" ng-show="error">{{error}}</div>
-		<canvas fp-image-thumbnail ng-model="image.thumbnail" ng-show="image.data" class="fp-image-preview" height="70" src="{{image.data}}" ng-if="!error"></canvas>
 		<div class="fp-inputs" ng-hide="image.isUploading">
 			<input class="fp-image-upload" fp-image-upload class="fp-input" type="file" name="image"/>
 			<input class="fp-submit" type="submit" value="Upload Image" ng-show="image.valid"/>

diff --git a/fp-src.js b/fp-src.js
@@ -0,0 +1,25 @@
+angular.module('firepress')
+.directive('fpSrc', ['$log', function ($log) {
+	// Used to embed images stored in Firebase
+
+	/*
+	Required attributes:
+		fp-src (The name of an image stored in Firebase)
+	*/
+	return {
+		link: function (scope, elem, attrs) {
+			var safename = attrs.fpSrc.replace(/\.|\#|\$|\[|\]|-|\//g, "");
+			var dataRef = new Firebase( [scope.firebaseUrl, 'images', safename].join('/') );
+			elem.attr('alt', attrs.fpSrc);
+			dataRef.once('value', function (snapshot) {
+				var image = snapshot.val();
+				if (!image) {
+					$log.log('It appears the image ' + attrs.fpSrc + ' does not exist.');
+				}else{
+					elem.attr('src', image.data);
+				}
+			});
+		},
+		restrict: 'A'
+	};
+}]);
diff --git a/fp-image-upload.js b/fp-image-upload.js
@@ -0,0 +1,57 @@
+angular.module('firepress')
+.directive('fpImageUpload', [function() {
+	return {
+		link: function(scope, element, attrs) {
+			// Modified from https://developer.mozilla.org/en-US/docs/Web/API/FileReader
+			var fileReader = new FileReader();
+			var fileFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
+			var wasUploading = false;
+
+			scope.image = {valid: false};
+
+			scope.$watch('image.isUploading', function () {
+				var isUploading = scope.image.isUploading;
+				if (isUploading && !wasUploading) {
+					wasUploading = true;
+				}else if (!isUploading && wasUploading) {
+					wasUploading = false;
+					element.parent().parent()[0].reset();
+				}
+			});
+
+			fileReader.onload = function (fileReaderEvent) {
+				scope.$apply(function () {
+					scope.image.data = fileReaderEvent.target.result;
+				});
+			};
+
+			var load_image = function(imageInput) {
+				if (imageInput.files.length === 0) { 
+					return;
+				}
+
+				var file = imageInput.files[0];
+
+				scope.image.filename = file.name;
+
+				if (!fileFilter.test(file.type)) { 
+					scope.error = 'You must select a valid image!';
+					scope.image.valid = false;
+					scope.$apply();
+					return; 
+				}else{
+					scope.error = '';
+					scope.image.valid = true;
+				}
+
+				fileReader.readAsDataURL(file);
+				scope.$apply();
+			};
+
+			element[0].onchange = function() {
+				load_image(element[0]);
+			};
+		},
+		restrict: 'A'
+	};
+}]);
diff --git a/template.html b/template.html
@@ -0,0 +1,13 @@
+<div ng-controller="ImageUpload" class="fp-image-upload">
+	<form ng-submit="upload_image(image)">
+		<div class="fp-error" ng-show="error">{{error}}</div>
+		<canvas fp-image-thumbnail ng-model="image.thumbnail" ng-show="image.data" class="fp-image-preview" height="70" src="{{image.data}}" ng-if="!error"></canvas>
+		<div class="fp-inputs" ng-hide="image.isUploading">
+			<input class="fp-image-upload" fp-image-upload class="fp-input" type="file" name="image"/>
+			<input class="fp-submit" type="submit" value="Upload Image" ng-show="image.valid"/>
+		</div>
+		<div class="fp-uploading" ng-show="image.isUploading">
+			Uploading...
+		</div>
+	</form>
+</div>