javascript - How to pass angular value when input type file changed -

i'd create thumbnail when choose new image review. ng-change doesn't work input type file in angular , use onchange instead.

<div ng-repeat="images in listimages"> <img id="imageid{{$index}}" ng-src="images.filelocation"> <input type="file" onchange="angular.element(this).scope().imagepreview(this, imageid{{$index}})" accept="image/*" /> </div>    $scope.imagepreview = function(fileinput, imageid) {     if (fileinput.files && fileinput.files[0]) {         var reader = new filereader();         reader.onload = function (e) {             $('#' + imageid).attr('src', e.target.result);         }         reader.readasdataurl(fileinput.files[0]);     }   } 

using code above, there's error. couldn't read imageid{{$index}}. there ways pass imageid index imagepreview method?

if don't misunderstand why don't use "ng-file-upload" directive upload files, provide features preview, crop & many more.

have :

ng-file-upload

or try code upload image preview js fiddle image upload

 <form name="myform"> <fieldset>   <legend>upload on form submit</legend>   <br>photo:   <input type="file" ngf-select ng-model="picfile" name="file"              accept="image/*" ngf-max-size="2mb" required          ngf-model-invalid="errorfiles">   <i ng-show="myform.file.$error.required">*required</i><br>   <i ng-show="myform.file.$error.maxsize">file large        {{errorfiles[0].size / 1000000|number:1}}mb: max 2m</i>   <img ng-show="myform.file.$valid" ngf-thumbnail="picfile" class="thumb"> <button ng-click="picfile = null" ng-show="picfile">remove</button>   <br>   <button ng-disabled="!myform.$valid"            ng-click="uploadpic(picfile)">submit</button>   <span class="progress" ng-show="picfile.progress >= 0">     <div style="width:{{picfile.progress}}%"          ng-bind="picfile.progress + '%'"></div>   </span>   <span ng-show="picfile.result">upload successful</span>   <span class="err" ng-show="errormsg">{{errormsg}}</span> </fieldset> <br> 

var app = angular.module('fileupload', ['ngfileupload']);   app.controller('myctrl', ['$scope', 'upload', '$timeout', function ($scope, upload, $timeout) { $scope.uploadpic = function(file) { file.upload = upload.upload({   url: 'https://angular-file-upload-cors-srv.appspot.com/upload',   data: {file: file, username: $scope.username}, });  file.upload.then(function (response) {   $timeout(function () {     file.result = response.data;   }); }, function (response) {   if (response.status > 0)     $scope.errormsg = response.status + ': ' + response.data; }, function (evt) {   // math.min fix ie reports 200%   file.progress = math.min(100, parseint(100.0 * evt.loaded / evt.total)); }); } }]);