CODEWITHSUNDEEP
javascriptangularjsng-file-upload
user5443928
user5443928

Reputation:

How to display image after selecting using Angular.js

I need one help.I have one image icon, when user will select that icon the file dialog will open and user will select the image.After selecting the image the image should display on that image icon.I am explaining my code below.

<div class="image-upload">
  <label for="bannerimage">
   <img src="{{attachImage}}"/>
  </label>
  <input type="file"  data-size="lg" name="bannerimage" id="bannerimage"  ng-model="file" ngf-pattern="'image/*'" accept="image/*" ngf-max-size="2MB" ngf-min-height="100" ngf-resize="{width: 100, height: 100}"  custom-on-change="uploadFile" required="required" ngf-select="onFileSelect($file);"  ngf-multiple="true">
</div>

my controller side code is given below.

$scope.attachImage="upload/logo.png";
$scope.uploadFile = function(event){
  console.log('event',event.target.files);
  var files = event.target.files;
  for (var i = 0; i < files.length; i++) {
    var file = files[i];
    var reader = new FileReader();
    reader.onload = $scope.imageIsLoaded; 
    reader.readAsDataURL(file);
  }
};

$scope.imageIsLoaded = function(e){
  $scope.$apply(function() {
    //var data={'image':e.target.result};
    // $scope.stepsModel.push(data);
    //$scope.myImage=e.target.result;
    $scope.attachImage='';
    $scope.attachImage=$scope.myImage;
  });
});

Here i need when user will select the image the image will display on that particular image icon.Please help me.

Upvotes: 0

Views: 1176

Answers (1)

CodeToad
CodeToad

Reputation: 4724

I believe you need to use reader.onloadend instead of reader.onload

reader.onloadend = function () {
    // set $scope.attachImage to reader.result;
  }

Upvotes: 1

Related Questions