angular file upload with nervgh/angular-file-upload

Issue

I’m doing a file upload from angular implementing the https://github.com/nervgh/angular-file-upload plugin, my setup it’s like this :

var vm = this,
    apiUrl = appConfig.getItem('BASE_API_URL'), // base url;

vm.uploader = $scope.uploader = new FileUploader({
    url: apiUrl + '/invoices/upload',
    headers: {
      "Content-Type": undefined
    }
});

// this function is triggered by a button outside
vm.uploadAll = function () { 
  vm.uploader.uploadAll();
};

on the html I have

    <input id="uploadFileButton"
       type="file"
       nv-file-select
       uploader="FUCtrl.uploader"
       multiple
       style="display: none;"/> 
    // the display none is due to that this input is click triggered
    // by an outside button

the thing is that for start on the client side the post request I see this
enter image description here

an image is uploaded (in theory), but the Content-Type is undefined, a missing enctype, and on the other hand on the server side I have this

var express = require('express'),
    multer  = require('multer'),
    cors = require('cors');

var app = express();

app.use(cors());
app.get('*', function(){});

app.use(multer({dest:'./uploads/'}).single('photo'));

app.post('/upload', function(req, res){

  console.log('hit');

  console.log(req.body); // form fields
  console.log(req.files); // form files
  res.status(204).end();

});

app.listen(3000);

but when I recieve the post I see on the console
console.log(req.body); // {}
console.log(req.files); // undefined

and I can’t get any data from the pdf’s upload

what am I missing ?

Solution

Finally I’ve discoverded the solution, on the HTML

nv-file-select

should be

nv-file-select=""

and remove

headers: {
  "Content-Type": undefined
}

from the uploader configuration, apparently those things didn’t set the content-type and his boundary well, so I toke them out and goy it to work

Answered By – flaalf

Answer Checked By – Mildred Charles (AngularFixing Admin)

Leave a Reply

Your email address will not be published.