CODEWITHSUNDEEP
angularjs
vivek
vivek

Reputation: 393

showing images while uploading multiple images

i have done multiple image upload using angular directive.my directive look like below

    app.directive('fileUpload', function () {
    return {
        scope: true,        //create a new scope
        link: function (scope, el, attrs) {
            el.bind('change', function (event) {
                var files = event.target.files;
                //iterate files since 'multiple' may be specified on the element
                for (var i = 0;i<files.length;i++) {
                    //emit event upward
                    scope.$emit("fileSelected", {file: files[i] });
                }                                       
            });
        }
    };
});

In my controller pushed all selected files into array

$scope.files = [];
$scope.$on("fileSelected", function (event, args) {
    $scope.$apply(function () { 
        $scope.files.push(args.file);
    });
});

In my view file i used ng-repeat to show all selected images.my view page code look like below

<div ng-repeat="step in files">
<img ng-src="{{step}}" />{{step.name}}
</div>

but here my problem is i can only show the image name but i want to show all selected images instead of names

Upvotes: 2

Views: 1931

Answers (1)

Pankaj Parkar
Pankaj Parkar

Reputation: 136154

To display currently selected file you could read it using FileReader API and provided that base64 string inside img src.

HTML

<input type="file" file-upload /> {{files.length}}
<div ng-repeat="step in files">
  <img ng-src="{{step.src}}" />{{step.src}}
</div>

Code

$scope.$on("fileSelected", function(event, args) {
  var item = args;
  $scope.files.push(item);
  var reader = new FileReader();

  reader.addEventListener("load", function() {
    $scope.$apply(function() {
      item.src = reader.result;
    });
  }, false);

  if (item.file) {
    reader.readAsDataURL(item.file);
  }
});

Live Demo

Upvotes: 3

Related Questions