delete seleted image while uploading multiple image in angularjs

Question

In multiple image upload how to delete particular image if i click that image in angularjs.i have uploaded multiple image and i have textbox with every uploaded image.if i click image delete icon it removes the image with that textbox.my view code looks below

  <input type="file" multiple file-upload /> {{files.length}}
  <div ng-repeat="step in files">
    <img ng-src="{{step.src}}" />
    <input type="text" ng-model="comment[$index]"><br>
    <input type="button" onclick="removeImage($index)" value="delete">
  </div>

In my angular controller code looks 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]
          });
        }
      });
    }
  };
});
  $scope.files = [];
  $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);
    }
  });

Sachila Ranawaka · Accepted Answer · 2017-09-16 13:50:13Z

1

Instead of onclick use ng-click and use javascript splice function to remove an item from an array

<input type="button" ng-click="removeImage($index)" value="delete">

$scope.removeImage = function(index){
   $scope.files.splice(index,1)
}

answered Sep 16, 2017 at 13:50

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

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

1 Comment

vivek Over a year ago

thank you so much..if u donot mind could you consider below question stackoverflow.com/questions/46250848/…

Collectives™ on Stack Overflow

delete seleted image while uploading multiple image in angularjs

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related