Multer: Cant get the middleware work in express 4

[daffa2]

I am just following the readme tutorial and encountered the problem of

Error: Unexpected field 
    at makeError (*\node_modules\multer\lib\make-error.js:12:13)

my code look like this:

var express = require('express');
var app = express();

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

app.post('/image',upload.single('avatar'), function (req, res) {
    var image = req.body;
    res.status(204).end()
});

my client is angular from the tutorial :https://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs

I cant find the solution can you help me?

[LinusU]

What is the field name of the file uploaded? <input type="file" name="THISVALUE" />

The code you are using is expecting it to be avatar.

[LinusU]

The new version of multer requires the fields of the uploaded files to be specified beforehand. Please refer to the readme on how to use this.

Please reopen if you require further assistance, I'd be happy to help!

[dmreinoso]

Hi Linus,

I have a related problem.

var express = require('express');
var multer  = require('multer');
var upload = multer().single('file');

var app = express();

app.post('/profile', function (req, res) {
  upload(req, res, function (err) {
    if (err) {
        console.log(req.file);
        console.log(err);
        return;
    }

    res.send('Profile ok');
  });
});

app.listen(3000);

Did my tests with a correct field name, in my cade "file" and this is the result:

{ fieldname: 'file',
  originalname: 'profile__.csv',
  encoding: '7bit',
  mimetype: 'application/vnd.ms-excel',
  size: 268381 }

{ [Error: Unexpected field]
  code: 'LIMIT_UNEXPECTED_FILE',
  field: 'file',
  storageErrors: [] }

[gabeio]

@dmreinoso
so in your code there it says .single('file') meaning one file allowed under the field name file...

your html should have a line to <input type="file" name="file" if the name="file" is not file that is your issue, otherwise you might have 2 <input type="file" and with .single() you are telling it only 1 should exist in which case you should use .array("file",<count>)...

if all of the above conditions are satisfied then there is an issue let us know! :smiley:

[dmreinoso]

You are rigth, I made a simple web form with one "file" input and it worked.

It appears that "Advanced Rest Client" a Chorme extension is sending more than one "file" field.

[LinusU]

Thanks for the help @gabeio :+1:

[gabeio]

no problem @LinusU :+1: now that I understand what's going on a bit better :laughing: and made a bunch of these mistakes already LOL

[samsonayalew]

As a note i had the same error when i was running node on node-debug but when i start node with npm start there an error related to other module(mongodb) the error wasn't on multer it self.

[rakeen]

Hi,
I ran into similar problem. I'm getting this error:

{
  "code": "LIMIT_UNEXPECTED_FILE",
  "field": "file",
  "storageErrors": []
}

In the back-end I'm trying to access the data like this:

var upload = multer({
        dest: '/data/profile_pic/'
    }).single('profile_pic');

My markup is:

<input class="form-control" type="file" id="profile_pic" name="profile_pic">

Notice that both req.file and req.files are undefined.

upload(req,res,function(err){
  if(err){
    console.log(req.file,req.files);
    res.status(500).send(err);
  }
}

[LinusU]

It seems like multer thinks that there is a file named "file" being uploaded. Could you post your entire <form> markup?

[rakeen]

Got it.
I was using ng2-file-upload to send the XHR request. By default they set the name of all the fields to file.

[LinusU]

Nice :raised_hands:

[jpesquibel]

Got mine working. It was the "name" of the file element what was causing problems. Good work.

[wiill]

Hi there!
Sorry to reopen, but I get the exact same error as @daffa2, but only when I'm using a mobile browser, seems to have some issues depending on the browser agent:

admin.ejs:
<input class="text1" type="file" name="questionFile" <input type="submit" value="Upload question file" data-icon="action"

routes.js
`var upload = multer({ dest: config.UPLOADS_DIR });

router.post('/file-upload', [requireAdmin], upload.single('questionFile'),function upload(req, res, next){

    try{

        // get the temporary location of the file
        var uploadedFilePath = req.file.path;

        if(req.file.mimetype.contains("csv")){
            if(req.file.size === 0)
                fs.unlink(uploadedFilePath);
            else{
                var previousVersion = path.join(path.dirname(uploadedFilePath) , req.file.originalname);
                if(fs.existsSync(previousVersion)){
                    fs.unlink(previousVersion);
                }

                var newName = path.join(path.dirname(uploadedFilePath) , req.file.originalname);
                fs.rename(uploadedFilePath, newName);
            }
        }else if(path.extname(uploadedFilePath) === ""){
            //EMPTY UPLOAD
            fs.unlink(uploadedFilePath);
        }

        res.redirect("/admin");
    }catch(err){
        next(err);
    }
});`

• Safari Desktop OK
• Safari iPad OK
• Safari iPhone KO
• Chrome Desktop OK
• Chrome mobile KO
• Chrome mobile faking desktop ("View desktop version of page"): no error but no upload neither

I'll edit upon more tests...

[Skillnter]

I am getting the same LIMIT_UNEXPECTED_FILE error...
But the condition is lil' weird...
I am using angular as frontend....
I made a form and upload the file.... it works...
Form/page isn't refreshed... use the same form...change the file and submit again.... error....
And the problem is.... when i refresh the page/form... it works again....
I checked the data sent too...
Its single file....
What could be the possible reason for this?

[wiill]

I was having 2 problems:

• I have a duplicate form on my page which was used on mobile browser, but duplicated field was using a different ID, so it was mixing up and throwing the error mentioned in the title of the issue. Getting the same field ID in both forms solved the error

• the Chrome Mobile faking desktop issue: no error but no upload either
  req.file.mimetype
  may be "csv" or "comma-separated-values" depending on the browser, and in my code, when other than "csv", router method did what it was supposed to do, i.e. nothing at all! so correcting the condition to
  filename.contains('csv')
  instead of checking the mime type did the trick

So @Skillnter, about your issue, I'm no angular expert, but maybe angular's changing the file field's ID once uploaded (setting some flag of some sort for whatever readon), I suggest you inspect the file input element after upload before refreshing?