AngularJS Image Preview before Upload showing previous image selected

Question

    myApp.directive('fileModel', ['$parse', function($parse) {
    return {
      restrict: 'A',
      link: function($scope, element, attrs) {
    var model = $parse(attrs.fileModel);
    var modelSetter = model.assign;
    element.bind('change', function(e) {
      $scope.$apply(function(e) {
        modelSetter($scope, element[0].files[0]);
      });
      $scope.setimage();
    });
  }

The above code is my directive.

In the function $scope.setimage()

     $scope.setimage = function() {
  var file = $scope.myFile;
  var reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = function(e) {
    $scope.ImageSrc = e.target.result;
  }
}

Whenever i choose the file,

  <img width= 250 height=350 ng-src="{{ImageSrc}}"/>
  <input type=`enter code here`"file" file-model="myFile"/>

Immediately the preview is not appearing. When i choose the second time, the preview for the previously selected image file is appearing. Not sure what is wrong.

you need to $apply() your change. Can probably find some use in these methods: jeffryhouser.com/index.cfm/2014/6/2/… — rg88
– rg88, Commented Dec 7, 2015 at 23:14

jperezov · Accepted Answer · 2015-12-07 23:22:51Z

0

Instead of element.bind('change', ..., you can use $scope.$watch on myFile, like so:

$scope.$watch('$scope.myFile', function(e) {
  $scope.$apply(function(e) {
    modelSetter($scope, element[0].files[0]);
  });
  $scope.setimage();
});

Note that $scope.myFile needs to be defined for this to occur, so if it's not defined in your directive you'll need to add this to your controller instead.

answered Dec 7, 2015 at 23:22

jperezov

3,1912 gold badges25 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user1062383 · Accepted Answer · 2015-12-09 05:03:04Z

0

I added $scope.$apply for the imagesrc assignment and the image updated immediately.

   $scope.setimage = function() {
   var file = $scope.myFile;
   var reader = new FileReader();
   reader.readAsDataURL(file);
   reader.onload = function(e) {
     $scope.$apply(function(){
      $scope.ImageSrc = e.target.result;
    });  }
   }

answered Dec 9, 2015 at 5:03

user1062383

391 silver badge6 bronze badges

Collectives™ on Stack Overflow

AngularJS Image Preview before Upload showing previous image selected

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related