How to display the image name of uploaded image in angularjs - angularjs

Question

I am uploading an image and in one td I also put the image name. But my problem is when I upload a image, the image name repeats in all the rows which should not. What is wrong with this? Thanks.
This is my fiddle link: http://jsfiddle.net/DharkRoses/g31ykfy8/
sample code:
$scope.fileReaderSupported = window.FileReader != null;
$scope.photoChanged = function (files, index) {
if (files != null) {
var file = files[0];
var index = this.$index;
$scope.imgName = files[0].name;
if ($scope.fileReaderSupported && file.type.indexOf('image') > -1) {
$timeout(function () {
var fileReader = new FileReader();
fileReader.readAsDataURL(file);
fileReader.onload = function (e) {
$timeout(function () {
$scope.thumbnail[index] = {dataUrl: e.target.result};
});
}
});
}
}
};

Answer 1

You need to create a same size of array for file names and based on index you need to push file names in photoChanged event.
Below is the working code for same.
angular.module('test', []);
angular.module('test').controller('UploadCtrl', function ($scope, $timeout,$parse) {
$scope.imgName ='';
$scope.thumbnail = {
dataUrl: []
};
$scope.fileNames = [,,,,];
$scope.fileReaderSupported = window.FileReader != null;
$scope.photoChanged = function (files, index) {
if (files != null) {
var index = this.$index;
var file = files[0];
$scope.fileNames[index] = files[0].name;
$scope.$apply();
if ($scope.fileReaderSupported && file.type.indexOf('image') > -1) {
$timeout(function () {
var fileReader = new FileReader();
fileReader.readAsDataURL(file);
fileReader.onload = function (e) {
$timeout(function () {
$scope.thumbnail[index] = {dataUrl: e.target.result};
});
}
});
}
}
};
});
The markup looks something like below.
<div ng-app="test">
<div ng-controller="UploadCtrl">
<table>
<tr ng-repeat="i in [1, 2, 3, 4]">
<td>{{i}}</td>
<td>
<input type="file" name="file" onchange="angular.element(this).scope().photoChanged(this.files)" />
<img ng-src="{{ thumbnail[$index].dataUrl }}" height="50px" />
</td>
<td>
{{fileNames[$index]}}
</td>
</tr>
</table>
</div>
</div>
The working fiddle can be found here.