Preview Image before uploading Angularjs
OdeToCode posted great service for this stuff. So with this simple directive you can easily preview and even see the progress bar:
.directive("ngFileSelect",function(){ return { link: function($scope,el){ el.bind("change", function(e){ $scope.file = (e.srcElement || e.target).files[0]; $scope.getFile(); }); } }It is working in all modern browsers!
JavaScript
$scope.setFile = function(element) { $scope.currentFile = element.files[0]; var reader = new FileReader(); reader.onload = function(event) { $scope.image_source = event.target.result $scope.$apply() } // when the file is read it triggers the onload event above. reader.readAsDataURL(element.files[0]);}Html
<img ng-src="{{image_source}}"><input type="file" id="trigger" class="ng-hide" onchange="angular.element(this).scope().setFile(this)" accept="image/*">This worked for me.