node.js to upload image using multer shows undefined

Question

Here I'm trying to upload files from 2 different file inputs, I'm able to upload it to the front-end but in the backend it remains undefined. Tried a couple of things but didn't work.

html:

<input type="file" name="file1" file-model = "file1"/>
<input type="file" name="file2" file-model = "file2"/>
<button  ng-click = "uploadFile()">UPLOAD FILES</button>

directive:

angular.module('myApp').directive('fileModel', ['$parse',
  function($parse) {
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {
        var model = $parse(attrs.fileModel);
        var modelSetter = model.assign;

        element.bind('change', function() {
          scope.$apply(function() {
            modelSetter(scope, element[0].files[0]);
          });
        });
      }
    };
  }
])

service:

angular.module('myApp').service('fileUpload', ['$http',
  function($http) {
    this.uploadFileToUrl = function(file, uploadUrl) {
      var fd = new FormData();
      fd.append('file1', file);
      fd.append('file2', file);
      $http.post(uploadUrl, fd, {
        transformRequest: angular.identity,
        headers: {
          'Content-Type': undefined
        }
      })
    }
  }
]);

controller:

angular.module('myApp')
  .controller('ContactCtrl', ['$scope', 'fileUpload', '$http',
      function($scope, fileUpload, $http) {
        $scope.uploadFile = function() {
          var file1 = $scope.file1;
          var file2 = $scope.file2;
          console.log('file is ');
          console.dir(file1);
          console.dir(file2);

          var uploadUrl = '/upload';
          fileUpload.uploadFileToUrl({
            file1, file2
          }, uploadUrl);
        };

server:

function upload(req,res){
  console.log(req.files.file1);
}

What does console.dir(file1); and console.dir(file2); prints? — jofftiquez
– jofftiquez, Commented Mar 18, 2016 at 5:04
this is what my browser console reads File lastModified : 1446532932000 lastModifiedDate : Tue Nov 03 2015 12:12:12 GMT+0530 (India Standard Time) name : "pic03.jpg" size : 76606 type : "image/jpeg" webkitRelativePath : "" proto : Blob — Ankit
– Ankit, Commented Mar 18, 2016 at 5:35

Himanshu Goyal · Accepted Answer · 2016-03-18 05:22:48Z

1

The one case of file can't be find in server side at nodejs ie you can provide the multerobject in /api/v1/uploadfile": [{ method: "POST", action: controllers.advertController.videoUpload, middleware: [multipartMiddleware], views: { json: views.jsonView } }],

global.multipartMiddleware = multipart();

At server side code use multipartMiddleware at middleware of request.

Controller (in this you pass correct parameter to service)

var file ={} file.file1=file1; file.file2=file2; fileUpload.uploadFileToUrl(file, uploadUrl);

Service (if you want to upload multiple file at a time use loop)

angular.module('myApp').service('fileUpload', ['$http', function ($http) {
    this.uploadFileToUrl = function(file, uploadUrl){
       var fd = new FormData();
       fd.append('file1', file.file1);
       fd.append('file2', file.file2);
       $http.post(uploadUrl, fd, {
          transformRequest: angular.identity,
          headers: {'Content-Type': undefined}
       })
    }
 }]);

edited Mar 18, 2016 at 5:22

answered Mar 18, 2016 at 5:07

Himanshu Goyal

1611 silver badge10 bronze badges

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

1 Comment

Ankit Over a year ago

thanks for the solution, it helped me. I just had to change the service code as u directed :)

Collectives™ on Stack Overflow

node.js to upload image using multer shows undefined

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related