How to display image after selecting using Angular.js

Question

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.

Where are setting the value of $scope.myImage? try using ng-src instead of src. — CodeToad
– CodeToad, Commented Jan 12, 2016 at 12:29
blueimp.github.io/jQuery-File-Upload/angularjs.html implements this feature in angular.js. perhaps you don't have to re-invent the wheel. — CodeToad
– CodeToad, Commented Jan 12, 2016 at 12:30
stackoverflow.com/questions/34524466/… this should help you. OP is also trying to achieve same as you. Have a look at the custom directive. — NiRUS
– NiRUS, Commented Jan 12, 2016 at 12:55
Use ngf-thumbnail or 'ngf-src'. There are plenty of samples on the github page and demo page. ngf-thumbnail will resize the image to the smaller size in case the image you are selecting is too large and could cause the browser to crash. — danial
– danial, Commented Jan 13, 2016 at 15:20

CodeToad · Accepted Answer · 2016-01-12 12:35:14Z

1

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

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

answered Jan 12, 2016 at 12:35

CodeToad

4,7546 gold badges43 silver badges53 bronze badges

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

Collectives™ on Stack Overflow

How to display image after selecting using Angular.js

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related