Sending File from Angular to Node Express

Question

I would like to send a file to my Node.js application, but it seems that the application receives nothing. I'm not sure what to do. How am I supposed to check If I have sent the file, and if I am receiving it in req?

<form>
  <input type = "file" file-model="files" multiple/>
  <button class="md-primary md-button md-cyan-theme md-ink-ripple" ng-click = "vm.uploadFile()">upload me</button>
</form>

This is my controller:

function uploadFile() {
  console.log("Load");

  var fd = new FormData();
  console.log($scope.files) // FileList {0: File, Length: 1}

  angular.forEach($scope.files, function (file) {
    fd.append('file', file);
  });

  console.log(fd); // FormData {} (Empty?)

  $http.post('http://localhost:8090/file-upload'), {
    headers: {'Content-Type': undefined },
    files: fd
  }).success(function (d) {
    console.log(d);
  });
}

This is my directive:

.directive('fileMode', ['$parse', function ($parse) {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      element.bind('change', function () {
        $parse(attrs.fileModel).assign(scope, elemtn[0].files);
        scope.$apply();
      });
    }
  };
}])

Here is my Express app:

app.post('/file-upload', function (req, res, next) {
  console.log("Sent!");

  var storage = multer.diskStorage({
    destination: function (req, file, callback) {
      callback(null, './uploads');
    },
    filename: function (req, file, cb) {
      cb(null, file.fieldname);
    }
  });

  var upload = multer({ storage : Storage }).array('userPhoto', 2);
  upload(req, res, function (err) {
    console.log(req.body.data.files);

    if (err) return res.end("Error uploading file.");
    res.end("File is uploaded.");
  })
})

Thank you for the help.

What about your backend code?

Aer0
– Aer0

2017-02-09 10:26:21 +00:00
Commented Feb 9, 2017 at 10:26 — Aer0
– Aer0, Commented Feb 9, 2017 at 10:26
added backend code

Serhiy
– Serhiy

2017-02-09 10:29:53 +00:00
Commented Feb 9, 2017 at 10:29 — Serhiy
– Serhiy, Commented Feb 9, 2017 at 10:29

stdob-- · Accepted Answer · 2017-02-09 11:17:33Z

1

The field names are not the same in web-form and in multer configuration:

var upload = multer({ storage : storage }).array('file',2);

answered Feb 9, 2017 at 11:17

stdob--

29.2k6 gold badges62 silver badges77 bronze badges

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

1 Comment

Serhiy Over a year ago

seems like fd in fronend code is empty.cannot understand why

Joshua · Accepted Answer · 2017-02-09 12:11:21Z

Hope this will work!

var express     = require('express'),
    app         = express(),
    bodyParser  = require('body-parser'),
    multer      = require('multer');

app.use(function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "http://localhost");
  res.header(
    "Access-Control-Allow-Origin", 
    "Origin, X-Requested-With, Content-Type, Accept"
  );
  next();
});

app.use(express.static('../client'));
app.use(bodyParser.json());

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, './uploads/');
  },
  filename: function (req, file, cb) {
    var split = file.originalname.split('.');
    cb(null, file.fieldname + "-" + Date.now() + "." + split[split.length - 1]);
  }
});
var upload = multer({ storage : storage }).single('file');


app.post('/upload', function (req, res) {
  upload(req, res, function (err) {
    if (err) res.json({ error_code: 1, err_desc: err });
    res.json({error_code: 0, err_desc: null });
  })
})
app.listen('3000', function () {
  console.log("Running on 3000");
})

Collectives™ on Stack Overflow

Sending File from Angular to Node Express

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related