CODEWITHSUNDEEP
javascriptangularjsmulter
arsenalist
arsenalist

Reputation: 391

I cannot view response in angular using multer

I am using Multer to upload photos. My backend is Node and I am able to successfully upload the image. When I upload the image, it is being send back via json back to Angular. I get the response successfully, but in console log all I see is [object Object] and I am unable to see the response in the view. I tried to stringify but there is no luck. Receiving responses always trips me up, and I would love to understand this finally. In my HTML nothing appears.

Response from Node.js

apiRoutes.post('/admin/photos',upload.single('file'),function(req,res){
  console.log(req.file);
  res.json(req.file);
});

Angular Upload

$scope.submit = function() {
  if ($scope.file) {
    $scope.upload($scope.file);
  }
};

// upload on file select or drop
$scope.upload = function (file) {
  Upload.upload({
    url: '/api/admin/photos',
    headers : {
    'Content-Type': 'multipart/form-data'
    },
    data: {file: file}
  }).then(function (resp) {
       console.log('Success ' + resp.config.data.file.name + 'uploaded. Response: ' + resp.data);
       $scope.myPic = resp.config.data.file.name;       
  }, function (resp) {
         console.log('Error status: ' + resp.status);
  }, function (evt) {
         var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
         console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
  });
 };
}]);

HTML

<form  ng-controller="adminController" name="form" enctype="multipart/form-data">
  Single Image with validations
  <div class="button btn btn-default" ngf-select ng-model="file" name="file" ngf-pattern="'image/*'"
    ngf-accept="'image/*'" ngf-max-size="20MB" ngf-min-height="100" 
    >Select</div>
  <button type="submit" ng-click="submit()">submit</button>
</form>

<p>{{ myPic }} </p>

<ul ng-repeat="picture in myPic">
    <li>{{ picture }} </li>
</ul>

Upvotes: 0

Views: 106

Answers (1)

Sing
Sing

Reputation: 4052

I don't think you should return the file from server, actually you can detect the file detail in client side by $scope.file:

http://jsfiddle.net/6jh0sb5n/3/

<input type="file" ngf-select ng-model="file" name="file"    
         accept="image/*" ngf-max-size="2MB" required
         ngf-model-invalid="errorFiles" ng-change="getFileDetail()">

.then(function (resp) {
    alert('filename:' + $scope.file.name + ',size: ' + $scope.file.size);
}

Upvotes: 1

Related Questions