send multiple image data with textbox from angular controller

Question

i want to send multiple image data with textbox value to server side(PHP).i have done multiple image upload but i am not able to send my data to server side when submitting form.my view code is below

<form ng-submit="save()"><input type="file" file-upload multiple>
<div ng-repeat="step in files">
    <img ng-src="{{step}}" />{{step.name}}
    <input type="text" ng-model="comments">
</div>
<input type="submit"></form>

in my controller

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]
          });
        }
      });
    }
  };
});

app.controller('mainCtrl', function($scope) {
  $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);
    }
  });
});

when i click submit button i want to send image name with corresponding comments for the image.how could i send the data through api cal for php.in my save() function code looks below

$scope.save = function()
{
console.log($scope.files)console.log($scope.comments)
}

Sachila Ranawaka · Accepted Answer · 2017-09-16 14:06:32Z

0

you need to use the $http service to send images to the server

$scope.save = function() {
    var fd = new FormData();
    fd.append('file', $scope.files);
    $http.post('uploadUrl', fd, {
            transformRequest: angular.identity,
            headers: {
                'Content-Type': undefined
            }
        })
        .then(function(response) {})
        .catch(function(response) {});
}

answered Sep 16, 2017 at 14:06

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

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

5 Comments

vivek Over a year ago

i want to send text box value with image

Sachila Ranawaka Over a year ago

change ng-model variable to file object property. like <input type="text" ng-model="step .comments"> This will bind the comment to files array objects

vivek Over a year ago

if i put console.log($scope.files) after this fd.append('file', $scope.files); not able to get any image name

vivek Over a year ago

can you please make plunkr for this

vivek Over a year ago

but here i am not able to preview my image

Collectives™ on Stack Overflow

send multiple image data with textbox from angular controller

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related