Upload image inside the ng-repeat row angularjs

Question

I have data and I list the data using ng-repeat. Each row has a browse image. My problem is when I browse image, the image displays in all row which should not. It should display to the one row. Please Help.

Here is my fiddle link: http://jsfiddle.net/DharkRoses/m2qagzzk/2/

Sample codes in fiddle:

angular.module('test', []);

angular.module('test') .controller('UploadCtrl', function ($scope, $timeout) {

$scope.thumbnail = {
    dataUrl: 'adsfas'
};
$scope.fileReaderSupported = window.FileReader != null;
$scope.photoChanged = function (files) {
    if (files != null) {
        var file = files[0];
        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.dataUrl = e.target.result;
                    });
                }
            });
        }
    }

dfsq · Accepted Answer · 2015-11-11 07:34:50Z

3

You need to have separate dataUrl per iteration row. For example you can make use of $index variable:

<img ng-src="{{ thumbnail[$index].dataUrl }}" height="50px" />

and JS part:

$scope.thumbnail = {
    dataUrl: []
};

$scope.fileReaderSupported = window.FileReader != null;
$scope.photoChanged = function (files, index) {
    if (files != null) {
        var file = files[0];
        var index = this.$index;
        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};
                    });
                }
            });
        }
    }
};

Demo: http://jsfiddle.net/m2qagzzk/3/

answered Nov 11, 2015 at 7:34

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

5 Comments

qazzu Over a year ago

Yeah u are right. The image source they get is same so the image repeat in the all row. Thank u very much

Mat.Now Over a year ago

@dfsq I think your answer is the best from other about uploading multiple files in angular, but I have one question about your fiddle, is possible to display file path in input ng-model? Maybe using track by $index?

Mat.Now Over a year ago

No file path but file name

dfsq Over a year ago

@Mat.Now It's simpler to put names into separate model object without ngModel here.

Mat.Now Over a year ago

@dfsq ok, but now I have one single input file, and I use ng-model to save file name in database but I am not sure that is the best solution to use ngModel to display file name in input and next save in database

Collectives™ on Stack Overflow

Upload image inside the ng-repeat row angularjs

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related