How to fix "MulterError: Unexpected field" in a nodejs express server?

Question

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)

Answer 1

In the code

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');
  }

I was putting the value single('photo'), when in the HTML form I sent, a 'zip' value in there. Changing that made the code work as expected :)