Skip to content

Instantly share code, notes, and snippets.

@abeisgoat
Last active January 30, 2020 15:54
Show Gist options
  • Save abeisgoat/7330325 to your computer and use it in GitHub Desktop.
Save abeisgoat/7330325 to your computer and use it in GitHub Desktop.
An example of image uploading using Firebase with AngularFire.
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>
@TomCosta
Copy link

TomCosta commented Jun 24, 2016

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment