Using the mean stack, how do you send an image back to the server?

Question

I'm using mean.io, where I've create a new package similar to articles. In it I create an image (using canvas.toDataURL()) and would now like to send it back to the server, but having issues; can someone please advise?

More specifically, what I have done so far is as follow:

In newpackages/public/controllers/newpackages.js //after creating image, I pass it to a sendImgToServer() method

'use strict';

angular.module('mean.newpackages').controller('NewpackagesController', ['$scope','$http',...,
function($scope, $stateParams, $http, ... Newpackages){

...

$scope.sendImgToServer = function(image){
    console.log(image);  //data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAoAAAARwCAYAAAB…
    var postURL = '/newpackages/saveImg';
    var fd = new FormData();
    fd.append("image", image);

    $http.post(postURL, fd,{
        headers:{'Content-Type':undefined},
        transformRequest:angular.identity
    })
    .success(function(){
    })
    .error(function(){
    });
};

In newpackages/public/routes/newpackages.js

...

$stateProvider
  ...
  .state('save newpackage image', {
    url:'/newpackages/saveImg',
    resolve:{
      loggedin:checkLoggedin
    }
  });
}

In newpackages/server/controllers/newpackages.js

...

exports.saveImg = function(req, res){
    console.log('save img');
};

Lastly, in newpackages/server/routes/newpackages.js

...

app.route('/newpackages/:fd')
    .post(newpackages.saveImage);

...

In console, the error message I'm receiving is:

TypeError: undefined is not a function
  at Scope.$scope.sendImgToServer

Thank you in advance.

Answer 1

The error your getting is because you're setting your content-type header to undefined in method sendImgToServer.

headers:{'Content-Type':undefined}

Set the appropriate header, for instance:

headers:{'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}