How do I get ng-file-upload to work with Node?

Question

I am using Angular with Node, Express, and Multer and ng-file-upload. For some reason I am getting 400 (bad request) http request error. I tried different things but this is all is coming back. Here is the code sample.

HTML

<form  ng-controller="adminController" name="form">

Single Image with validations Select

submit

Angular app.js

$scope.submit = function() {
    $log.info($scope.file);


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

Node js

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

Answer 1

upload.single() should instead be upload.single('file') since that is the property name you're using for your upload. Also, explicitly setting:

headers : {
  'Content-Type': 'multipart/form-data'
}

is unnecessary.

If that still doesn't work, you should temporarily remove upload.single('file') and ensure that your route handler is being reached to begin with (and some prior middleware/route handler hasn't intercepted it).