Angular / nodejs ng-file-upload - file loaded on angular but missing on nodejs side

Question

I have a file being cropped and loaded on the angular side. Thanks to https://github.com/danialfarid/ng-file-upload

        SignUp2ControllerTest -- $scope.upload -->
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAgAElEQVR4Xmy9CbAk61Ue+GVmZWZl7XX32337db9Veov0tCEhJIyFsc2iwQOefWJmFI7AIIztYBxETNgOIiYM42

Angularjs side.

$scope.upload = function (dataUrl) {

  console.log(' SignUp2ControllerTest -- $scope.upload --> ',  dataUrl);

  Upload.upload({
    url: 'http://test.dev:3000/register/user/uploads',
    data: {
      file: Upload.dataUrltoBlob(dataUrl)
    },
  }).then(function (response) {
    $timeout(function () {
      $scope.result = response.data;
    });
  }, function (response) {
    if (response.status > 0) $scope.errorMsg = response.status
      + ': ' + response.data;
  }, function (evt) {
    $scope.progress = parseInt(100.0 * evt.loaded / evt.total);
  });
}

I can see the file in the developer window. My issue seems to be on the Nodejs side.

 route: 
   { path: '/user/uploads',
     stack: [ [Object], [Object] ],
     methods: { post: true } },
  files: 
   { file: 
      { fieldName: 'file',
        originalFilename: 'undefined',
        path: '/tmp/noKbOGnCb-H_RVUMuF_QSqQs',
        headers: [Object],
        size: 70599,
        name: 'undefined',
        type: 'image/png' } },
  _body: true,
  read: [Function] }
UserController.prototype. req.files { file: 
   { fieldName: 'file',
     originalFilename: 'undefined',
     path: '/tmp/noKbOGnCb-H_RVUMuF_QSqQs',
     headers: 
      { 'content-disposition': 'form-data; name="file"; filename="undefined"',
        'content-type': 'image/png' },
     size: 70599,
     name: 'undefined',
     type: 'image/png' } }
UserController.prototype. undefined
=========================>>  undefined
=====+++++++++++++++====>>  image/png

Nodejs side..

UserController.js

UserController = function() {};

UserController.prototype.uploadFile = function(req, res) {
    // We are able to access req.files.file thanks to
    // the multiparty middleware
    var file = req.files.file;
    console.log('UserController.prototype. req' ,req);
    console.log('UserController.prototype. req.files' ,req.files);
    console.log('UserController.prototype.' ,file.name);
    console.log('=========================>> ' ,file.name);
    console.log('=====+++++++++++++++====>> ' ,file.type);
}

module.exports = new UserController();

Nodejs

var multipart = require('connect-multiparty');
var multipartMiddleware = multipart();


// Requires controller
var UserController = require('../controllers/UserController');

// Example endpoint
router.post('/user/uploads', multipartMiddleware, UserController.uploadFile);

Any help would be great..

Thanks Phil

Answer 1

Ok,

I found an answer.

$scope.upload = function (dataUrl, picFile) {

  Upload.upload({
    url: 'http://test.dev:3000/register/user/uploads',
    data: {
      file: Upload.dataUrltoBlob(dataUrl, picFile.name)
    },

Angular side.

  <button class="row-left btn btn-primary" ng-click="upload(croppedDataUrl, picFile)">Submit</button>

Node side working

POST /signup/user/uploads 
facebookTrip2.JPG
image/png
/tmp/G57AspvNo8eSxZs7YR9s8qjT.JPG