-
-
Save abeisgoat/7330325 to your computer and use it in GitHub Desktop.
angular.module('app') | |
.directive('fbImageUpload', [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' | |
}; | |
}]); |
angular.module('app') | |
.directive('fbSrc', ['$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' | |
}; | |
}]); |
angular.module('app') | |
.controller('ImageUpload', ['$scope', '$log', | |
function ImageUpload($scope, $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; | |
} | |
}); | |
}; | |
} | |
]); |
<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"> | |
<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="fb-uploading" ng-show="image.isUploading"> | |
Uploading... | |
</div> | |
</form> | |
</div> |
for newbies like me: what do the firebase rules for this look like?
How can I make it work? I have downloaded it but I have no idea how to make it work.
Thanks for posting this! Is there a new updated version that works with the new firebase api? When you call new Firebase, for example should that be creating a firebaseObject instead?
Hi, was anyone able to make this work, I tried but no resuts...
Ahh okay! It works...
But need to pay some attention. For me, I'm using Ionic Framework, so I had to add install ng-file-upload to it and create a input at the template to the fields "author" and also eliminate the "thumbnail" field, if you dont want to use it (is optional).
1 - npm or bower install ng-file-upload --save
2 - inject it in the html code <script src="ng-file-upload.js"></script>
3 - exclude the "thumbnail" field (line 13) thumbnail: image.thumbnail,
4 - add info to the author fields <input type="text" placeholder="Author name" name="authorProvider" ng-model="image.author.provider" size="31" required>
and pay attemption to id: $scope.auth.user.id
And so enjoy!
I noticed you fileFilter.. However, how can I add pdf files to this filter? or Where did you get this filter from?