0

How to append choose images one by one to div tag using using ng-repeat when I click Add button after chosen file <input type="file"> in Angular JS. I have tried code below:

<body ng-app="myApp">

<div ng-controller="mainController">
    <div>
        <h3>Added Images: {{addedImages()}}</h3>
    </div>

    <div>
        <input type="file" id="filename" ng-model="filename" name="">
        <button ng-click="test()">Add Image</button>
        <div class="shelfgallery"></div>
    </div>        
</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('mainController', function($scope) {
        $scope.imageSources=[];

        $scope.test = function(){
            var url = ""//facing trouble in getting full URL of choosen image 
            alert(url);
            $scope.imageSources.push({
                imges: $scope.filename
            });
            var element = angular.element($('.shelfgallery'));
            element.append('<img id="img_11" ng-repeat="imageSource in imageSources track by $index" ng-src="{{imageSource }}" /><br><br>');
            //$compile(element)($scope);
        };

        $scope.addedImages = function(){
            return $scope.imageSources.length;
        }

    });
</script>

</body>

If any wrong here let me know, or any other solution.

Stephen Docy
  • 4,738
  • 7
  • 18
  • 31
Shivanand L.C
  • 105
  • 1
  • 2
  • 10
  • First of, you cannot use ng-model with file . You have to write a custom directive for this https://stackoverflow.com/questions/18571001/file-upload-using-angularjs – Vivz Aug 19 '17 at 10:47
  • You can adapt the answer from this question: https://stackoverflow.com/questions/35429854/angularjs-dynamically-adding-and-removing-elements-using-directive – Vega Aug 19 '17 at 14:12

0 Answers0