title: Node.js multer Error: Unexpected field
body: <p>I have trouble with Node.js multer ...</p>
  
  <p>I want to know what causes this problem.
  I think I set the right name of <code>input[name=streamfile]</code> between client and node.js's multer <code>upload.single('streamfile')</code>.</p>
  
  <p>I have no idea what other elements cause this problem.</p>
  
  <p>Here is my code below..
  Thanks.</p>
  
  <h2>Error Msg</h2>
  
  <pre><code>Error: Unexpected field
      at makeError (/Users/taeseongpark/Documents/Study/NodeJS/node_basic_test/node_modules/multer/lib/make-error.js:12:13)
      at wrappedFileFilter (/Users/taeseongpark/Documents/Study/NodeJS/node_basic_test/node_modules/multer/index.js:40:19)
      at Busboy.&lt;anonymous&gt; (/Users/taeseongpark/Documents/Study/NodeJS/node_basic_test/node_modules/multer/lib/make-middleware.js:114:7)
      at emitMany (events.js:127:13)
      at Busboy.emit (events.js:201:7)
      at Busboy.emit (/Users/taeseongpark/Documents/Study/NodeJS/node_basic_test/node_modules/busboy/lib/main.js:38:33)
      at PartStream.&lt;anonymous&gt; (/Users/taeseongpark/Documents/Study/NodeJS/node_basic_test/node_modules/busboy/lib/types/multipart.js:213:13)
      at emitOne (events.js:96:13)
      at PartStream.emit (events.js:188:7)
      at HeaderParser.&lt;anonymous&gt; (/Users/taeseongpark/Documents/Study/NodeJS/node_basic_test/node_modules/dicer/lib/Dicer.js:51:16)
  </code></pre>
  
  <h2>Client HTML</h2>
  
  <pre><code>&lt;form action="http://localhost:8989/fileupload" method="post" enctype="multipart/form-data"&gt;
      &lt;input type="file" name="streamfile"&gt;
      &lt;input type="button" data-inline="true" value="Input" id="filesubmit"&gt;
  &lt;/form&gt;
  &lt;script lang="javascript"&gt;
      $('form #filesubmit').on('click', (e)=&gt;{
          var uploadfile = $("input[name=streamfile]")[0].files[0];
          var formData = new FormData(); 
          formData.append("myfile", uploadfile);
  
          console.log('uploadfile', uploadfile, uploadfile.type);
  
          var localurl = 'http://localhost:8989/fileupload'
          $.ajax({ 
              url: localurl,  // googleCloud
              data: formData, 
              processData: false, 
              contentType: false, 
              type: 'POST', 
              success: function(data){ 
                  console.log('response data', data);
              } 
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <h2>Node.js Server</h2>
  
  <pre><code>var express = require('express')
  var multer  = require('multer')
  var upload = multer({ dest: 'uploads/' })
  
  var app = express()
  
  app.use(function(req, res, next) {
      res.header("Access-Control-Allow-Origin", "*");
      res.header("Access-Control-Allow-Headers", 'Content-Type, Authorization, Content-Length, X-Requested-With');
      res.header("Access-Control-Allow-Methods", "PUT, POST, GET, OPTIONS, DELETE");
      next();
  });
  
  app.post('/fileupload', upload.single('streamfile'), function (req, res) {
      console.log('req.file', req.file);
    // req.file is the `avatar` file 
    // req.body will hold the text fields, if there were any 
  })
  
  // Connect to Web Server
  var port = '8989';
  app.listen(port, () =&gt; {
      console.log('[Express] fileupload started at %d port', port);
  });
  // "express": "^4.16.2", "multer": "^1.3.0",
  </code></pre>