Last active
January 30, 2020 15:54
-
-
Save abeisgoat/7330325 to your computer and use it in GitHub Desktop.
An example of image uploading using Firebase with AngularFire.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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' | |
}; | |
}]); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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' | |
}; | |
}]); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
} | |
}); | |
}; | |
} | |
]); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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 toid: $scope.auth.user.id
And so enjoy!