Multer not accepting files in array format gives 'Unexpected File Error'

Question

Multer is a module used along with node js and express to upload files. I am using ng-file upload module on the angular side.

When I am sending multiple files one by one it works just fine without any errors whatsoever but when I am sending all files in one go in array format and then I am making necessary changes on the server side as suggested by Multer's github, still error comes.

Here is the error

Error: Unexpected field
    at makeError (C:\nodefiles\new\node_modules\multer\lib\make-error.js:12:13)
    at wrappedFileFilter (C:\nodefiles\new\node_modules\multer\index.js:39:19)
    at Busboy.<anonymous> (C:\nodefiles\new\node_modules\multer\lib\make-middleware.js:109:7)
    at Busboy.emit (events.js:118:17)
    at Busboy.emit (C:\nodefiles\new\node_modules\multer\node_modules\busboy\lib\main.js:31:35)
    at PartStream.<anonymous> (C:\nodefiles\new\node_modules\multer\node_modules\busboy\lib\types\multipart.js:209:13)
    at PartStream.emit (events.js:107:17)
    at HeaderParser.<anonymous> (C:\nodefiles\new\node_modules\multer\node_modules\busboy\node_modules\dicer\lib\Dicer.js:51:16)
    at HeaderParser.emit (events.js:107:17)
    at HeaderParser._finish (C:\nodefiles\new\node_modules\multer\node_modules\busboy\node_modules\dicer\lib\HeaderParser.js:70:8)
    at SBMH.<anonymous> (C:\nodefiles\new\node_modules\multer\node_modules\busboy\node_modules\dicer\lib\HeaderParser.js:42:12)
    at SBMH.emit (events.js:118:17)
    at SBMH._sbmh_feed (C:\nodefiles\new\node_modules\multer\node_modules\busboy\node_modules\dicer\node_modules\streamsearch\lib\sbmh.js:159:14)
    at SBMH.push (C:\nodefiles\new\node_modules\multer\node_modules\busboy\node_modules\dicer\node_modules\streamsearch\lib\sbmh.js:56:14)
    at HeaderParser.push (C:\nodefiles\new\node_modules\multer\node_modules\busboy\node_modules\dicer\lib\HeaderParser.js:48:19)
    at Dicer._oninfo (C:\nodefiles\new\node_modules\multer\node_modules\busboy\node_modules\dicer\lib\Dicer.js:198:25)

Sample Controller Code

var app = angular.module('fileUpload', ['ngFileUpload']);

app.controller('MyCtrl', ['$scope', 'Upload', '$timeout', function ($scope, Upload, $timeout) {
    $scope.uploadFiles = function (files) {
        $scope.files = files;
        if (files && files.length) {
            console.log(files);
            Upload.upload({
                url: '/api/data/addtweet',
                data: {
                    files: files
                }
            }).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 =
                    Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
            });
        }
    };
}]);

Please tell me what I'm doing wrong. Google searches were not that useful, I have already tried that i.e.why I am posting here.

Answer 1

The reason for the error is that multer currently does not support the array syntax that ng-file-upload uses by default which is files[0], files[1], files[2], etc. multer is expecting a series of files with the same field name.

The easiest solution is to set ng-file-upload's arrayKey option like so to avoid appending the [index] part:

Upload.upload({
  url: '/api/data/addtweet',
  arrayKey: '', // default is '[i]'
  data: {
    files: files
  }
})

Answer 2

If someone is facing a similar issue when uploading a custom form data object, you can use this approach. In here I am not using ngFileUpload.

Client Side code

var fd = new FormData();

for( var i =0; i< files.length ; i++ ){
    fd.append('fileItems' , files[i] );
}

fd.append('_id', params._id );              
fd.append('user', params.user );              

return $http.post( ROOT_URL + '/uploadFiles/', fd, {
    transformRequest: angular.identity,
    headers: {'Content-Type': undefined }
});

Express Router

var multer  = require("multer");
var upload = multer({ dest: "uploads/" });

app.post('/api/uploadFiles', upload.array('fileItems'), handlers.files.uploadFiles);