Multer error unexpected field

Fix «Unexpected field» Error From Multer

You set out to implement file uploads in Node.js, only to get blocked by this particular error:

MulterError: Unexpected field

What does this cryptic message even mean?!

By now you’ve already spent several hours trying to solve this problem. Why does implementing a simple file upload feature have to be so hard?!

It doesn’t have to be this way though. Writing an endpoint that accepts, parses and uploads a file in Node.js can be straightforward.

After reading this article, you’ll turn an annoying error into something you’ll solve in less than 5 minutes!

Read on or if you prefer video, watch it below.

Input name needs to match multer function argument

The foremost cause for this error is when the name attribute of the file input doesn’t match the argument passed to one of multer’s middleware functions.

Input name needs to match with the argument in multer middleware function

The NAME you use in multer’s upload.single(NAME) middleware function (or any of the other functions discussed below) must be the same as the name attribute of the input element .

Therefore, you have to double-check that these values are an exact match. Pay extra attention to invisible whitespace or characters that may look the same but have a different Unicode value. It’s better to copy-paste the value from one place to another.

Multer is strict in what input it accepts from the client, and for a good reason. File uploads can be a big vulnerability for backend servers. It’s easy for a bad actor to overflow the server with a huge amount of files, or send malformed data that breaks the parser and potentially gives the hacker access to the server. Multer is designed with a mindset to trust nothing that comes from the client so it can protect your server from a potential DoS attack.

Depending on the form data you’re expecting from the client, multer provides you with different middleware functions:

• no file (text only) — upload.none()
• single file — upload.single(fieldname)
• multiple files, single input — upload.array(fieldname[, maxCount])
• multiples files, multiple inputs — upload.fields(fields) where fields is an array of objects with name and optionally maxCount keys
• any of the above — upload.any() (avoid if possible)

multer.any() is oftentimes used as a quick fix. This is dangerous and can make your server vulnerable to attacks. multer.any() will accept all files sent by the client which can lead to unexpected values further down in your application logic. Especially when used as a global middleware instead of a route-specific middleware.

It’s always better to fix the error by making sure field names are the same, instead of using multer.any() .

If you decide to use multer.any() , use it only on specific routes and make sure you’re handling all uploaded files.

Use the appropriate middleware function so that the form data received from the client is allowed to pass through. When you see an «Unexpected field» error from Multer, it’s because the middleware function is rejecting some (or all) form data.

With FormData

When you’re using FormData to programatically construct a form, input name is the first argument to the .append() function:

You then have to make sure that the same value, NAME in this case, is used as the fieldname argument in the middleware function:

Inputs with multiple files might have a name ending with []

In some cases, you might have a client that appends [] to the input name if it has multiple files.

When you configure multer to accept a photos field but the client sends photos[] instead, multer will throw a MulterError: Unexpected field error.

To fix the error, append [] to the fieldname argument in the middleware function: upload.array(‘photos[]’) .

Finding the unexpected field

Error messages from multer are rather cryptic. They don’t give you much information to help you find the root cause of the problem.

There’s a way to extract a little bit more information from the error thrown by multer and find the rejected field.

Add an error handling middleware and log the error argument. More specifically, the field property of the error tells you which input name multer has an issue with:

In a Node.js production application, you’d want to replace console.log with a proper logging mechanism to avoid messy logs and quickly find what you’re looking for.

Having found the rejected field, you’re a step closer to solving the error since you know where to start looking.

Other possible causes

If the error persists after verifying the input name matches the multer function argument, there might be something else going on. Here are three other possible causes for this error, and a solution for each.

Conflicting multer instances

I’ve seen this come up a few times so it’s worth mentioning.

Make sure there is only one multer instance used in the middleware chain of any particular route.

What do I mean by this? Let’s look at an example:

Can you see what’s wrong with the above example?

There’s a multer instance used on all routes ( upload.array() ) and another multer instance ( upload.single(‘photo’) ) specific to the /upload route.

If you try to upload a single file with the correct input name ( photo ), the first multer instance will throw an error and the code never reaches the second multer instance. That’s because upload.array() is missing a fieldname argument and it will always throw an error on file uploads.

If you’re using multer at top of your middleware chain to get access to the authentication token in the body, you should move it to the request headers instead. It’s standard practice to put an authentication token in the Authorization header.

Unaccounted file inputs

Remember when I said earlier that multer is strict about accepting form data from the client?

Even if you made sure the field names are the same, you will still face this error if there are file inputs you haven’t told multer about.

You can configure multer to accept multiple fields with the upload.fields(fields) method. fields is an array of objects with a name , and optionally maxCount , key.

For example, the following HTML form has two file inputs:

To configure multer to accept the above form, you would have to write the following code:

This configuration tells multer we’re expecting two file input fields named «avatar» and «photos» with no more than 1 and 6 files, respectively. In case there are other fields present, multer will throw an «Unexpected field» error.

Number of files exceeding the configured limit

When you see a MulterError: Unexpected field error, you don’t suspect the reason to be the number of files exceeding the configured limit.

If you’re using a middleware function that allows multiple files to be uploaded ( .array() or .fields() ), make sure the number of files uploaded doesn’t exceed the maxCount value.

To quickly check if this might be the cause, set maxCount to a huge number (eg.: upload.array(‘photos’, 9999) ). If the error disappears, you’ve found the issue. Either increase maxCount to allow more files to be uploaded at once, or change the client to send fewer files at a time.

Conclusion

Fixing cryptic multer errors and getting file uploads to work properly in Node.js can be a frustrating experience.

The foremost reason for the «Unexpected field» error is when the file input name doesn’t match the argument passed to the multer function.

Other possible reasons for this error are conflicting multer instances, unaccounted file inputs and exceeding the number of files limit.

How do you upload a file in Node.js?

Use this FREE request parsing guide and implement seamless working Node.js APIs that follow the latest best practices.

No spam! 🙅🏻‍♀️ Unsubscribe at any time.

You Might Also Like

ES Modules in Node.js

5 min read

Set up Automated Deployments From Github With Webhook

7 min read

Источник

Unclear error message «MulterError: Unexpected field» #799

With multer, you can basically allow/expect one, multiple, none or any attachments.

When you send an attachment to an endpoint that doesn’t accept one, you get the cryptic error message: «MulterError: Unexpected field».

Wondering if there is a critical problem and checking all my form fields for possible illegal characters, changing field names, etc, it turns out an attachment was sent but not expected.

I think the error message should be: Unexpected Attachment or Attachment Forbidden.

Reproduce

Exposed over serveo for testing purposes.

Mailgun

Sending a test request with this button

Error

Lines 38 to 45 in 805170c

Alternatively the request just continue with the decoded form parameters, ignoring the unexpected attachments.

The text was updated successfully, but these errors were encountered:

@Redsandro I was able to reproduce the issue,
When the server encounters unexpected file error is returned to multer-error.js

return cb ( new MulterError ( ‘LIMIT_UNEXPECTED_FILE’ , file . fieldname ) )

In multer-error.js error mapping is defined, where ‘LIMIT_UNEXPECTED_FILE’ error is mapped to Unexpected field.

‘LIMIT_UNEXPECTED_FILE’ : ‘Unexpected field’

For the request just continue with the decoded form parameters, ignoring the unexpected attachments, currently it is not supported.
Let me know if this helps in clearing your doubts.

@HarshithaKP thank you. I understand why this happens now.

The error message is still ambiguous. Could be helpful to others to clarify it.

‘File not allowed in form-data with this method. Use «.any()» in stead.’

I’m having this error message and cannot decode the thread.

What could I have done to receive the error «MulterError: Unexpected field»?

What is it expecting instead?

@ogrotten this error message is ambiguous, and you could have probably figured it out on your own if the message was a bit less abstract.

I’m not sure what you are starting with, but every option has a set amount of accepted files.

So you probably either used .none() and submitted a file, or .single() and submitted more than one file.

Without knowing what you’re trying to do, the safest bet is probably to use .any() .

Hope this helps.

@Redsandro interesting . . . I used single() and only had one file, but I think the sent object may not have named the fields the way multer was expecting.

I appreciate the post tho. It basically means that if I come this way again, I’ll likely use .any() «just in case».

@Redsandro I am getting this error when posting a form without a file while using single() . Does that mean single() has to have at least one file?

@Redsandro how can I configure it to accept 0 or a maximum of 1 file? The same route handles single file uploads as well as forms without any files. hence sometimes a form has 1 upload and sometimes 0.

I think you can’t. Either submit the form to a different handler based on whether or not a file was selected client-side, or accept any() .

But this isn’t my project. Maybe a maintainer or developer of this expressjs plugin can be of more help.

@Redsandro @aysiscore To my understanding, that isn’t the case.

When using single and sending a form without a file input field, or even an empty file input field, this error won’t be triggered (assuming that if a file input field is present at all, there is only one and it named how single is expecting it to be).

See this bare bones example codesandbox. Click «Upload image» without selecting one. The error won’t be triggered.

@aysiscore We’d need to see your upload route and how you’re submitting the form from the client to better understand what the issue is. Feel free to open another issue.

Hello all, I’m a newbie in node-express, my requirement is to upload multiple images at once. So on Postman, I have images[] , and then I tried using upload.array(‘name’) , didn’t work. What works indeed is the upload.any() .

Hello everyone! I want to also mention that the same error happens when the «name» attribute in the file upload

is not the same as in the
upload.single(«X»)

@ilyes42 Thanks man, Totally missed that

that the same error happens when the «nam

Yes sir, That was my error!! Thanks Man!

I had the same problem and then it is resolved when I changed the destination folder name. Check if your uploading file name and destination folder name are the same. If they are change the destination folder name.

I am facing this problem. How can I achieve something like this?

© 2023 GitHub, Inc.

You can’t perform that action at this time.

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

Источник

I’m setting up a server to upload zip files from the client. The server runs with express and multer to do this. When uploading a file, the server throws a «MulterError: Unexpected field» error and I cannot figuere out what is cousing it.

I’ve tried with png images and It works just fine. But with the zip files it just doesn’t work.

const multerConfig = {
    //specify diskStorage (another option is memory)
    storage: multer.diskStorage({
      //specify destination
      destination: function(req, file, next){
        next(null, './public/zip-storage');
      },

      //specify the filename to be unique
      filename: function(req, file, next){
        console.log(file);
        const ext = file.mimetype.split('/')[1];
        //set the file fieldname to a unique name containing the original name, current datetime and the extension.
        next(null, file.fieldname + '-' + Date.now() + '.'+ext);
      }
    }),

    // filter out and prevent non-image files.
    fileFilter: function(req, file, next){
          if(!file){
            next();
          }
        // only permit zip mimetypes
        const zip = file.mimetype.startsWith('application');
        if(zip){
          console.log('zip uploaded');
          next(null, true);
        }else{
          console.log("file not supported")
          errorReq = true;
          return next();
        }
    }
  };


  /* ROUTES
  **********/
  app.get('/', function(req, res){
    res.render('index.html');
  });

  var errorDetection = function(){
    if(!errorReq){
      errorReq = false;
      return('complete.html');
    } else{
      errorReq = false;
      return('errorupload.html');
    }
  }

  app.post('/upload', multer(multerConfig).single('photo'),function(req, res){
      //Here is where I could add functions to then get the url of the new photo
      //And relocate that to a cloud storage solution with a callback containing its new url
      //then ideally loading that into your database solution.   Use case - user uploading an avatar...
      res.redirect('complete.html');
  }

);

  // RUN SERVER
  app.listen(port,function(){
    console.log(`Server listening on port ${port}`);
  });

This is the error:

MulterError: Unexpected field
    at wrappedFileFilter (/home/axentiva-miguel/Documentos/ServerAPP/node_modules/multer/index.js:40:19)
    at Busboy.<anonymous> (/home/axentiva-miguel/Documentos/ServerAPP/node_modules/multer/lib/make-middleware.js:114:7)
    at emitMany (events.js:147:13)
    at Busboy.emit (events.js:224:7)
    at Busboy.emit (/home/axentiva-miguel/Documentos/ServerAPP/node_modules/busboy/lib/main.js:38:33)
    at PartStream.<anonymous> (/home/axentiva-miguel/Documentos/ServerAPP/node_modules/busboy/lib/types/multipart.js:213:13)
    at emitOne (events.js:116:13)
    at PartStream.emit (events.js:211:7)
    at HeaderParser.<anonymous> (/home/axentiva-miguel/Documentos/ServerAPP/node_modules/dicer/lib/Dicer.js:51:16)
    at emitOne (events.js:116:13)