File Metadata Microservice - Problems with multer (Err: 'Unexpected Field')

Code Feedback
1

Hey, I’ve been stuck for a bit on the File Metadata Microservice project. Everything seemed pretty straightforward, but unfortunately I can’t figure out why I keep running into an error whenever I try to upload a file. I’ve searched online and in this board but not found anything helpful while I didn’t find any mistakes in my code. Maybe another pair of eyes could help me out :slight_smile:

Here’s the code for my form:

<form action="/filesize" method="post" enctype="multipart/form-data">
        Select file to upload:
        <input type="file" name="fileToUpload" id="fileToUpload">
        <input type="submit" value="Upload file" name="submit">
      </form>

And here’s the code for my backend:

const express = require('express')
const app = express()
var multer  = require('multer')
var storage = multer.memoryStorage()
var upload = multer({storage: storage, limits: {fileSize: 30000000}})

app.use(express.static('public'))

app.get("/", (request, response) => {
  response.sendFile(__dirname + '/views/index.html')
})

app.post("/filesize", upload.single('test'), (req, res) => {
  console.log('body: ' + req.body)
  console.log('file: ' + req.file)
  res.send({size: req.file.size})
})

const listener = app.listen(process.env.PORT, () => {
  console.log(`Your app is listening on port ${listener.address().port}`)
})

And this is the error that I keep getting:

Error: Unexpected field
at makeError (/rbd/pnpm-volume/0be69ac9-e198-4833-8239-78fa0c4fbf6e/node_modules/.registry.npmjs.org/multer/1.3.0/node_modules/multer/lib/make-error.js:12:13)
at wrappedFileFilter (/rbd/pnpm-volume/0be69ac9-e198-4833-8239-78fa0c4fbf6e/node_modules/.registry.npmjs.org/multer/1.3.0/node_modules/multer/index.js:40:19)
at Busboy. (/rbd/pnpm-volume/0be69ac9-e198-4833-8239-78fa0c4fbf6e/node_modules/.registry.npmjs.org/multer/1.3.0/node_modules/multer/lib/make-middleware.js:114:7)
at Busboy.emit (events.js:180:13)
at Busboy.emit (/rbd/pnpm-volume/0be69ac9-e198-4833-8239-78fa0c4fbf6e/node_modules/.registry.npmjs.org/busboy/0.2.14/node_modules/busboy/lib/main.js:38:33)
at PartStream. (/rbd/pnpm-volume/0be69ac9-e198-4833-8239-78fa0c4fbf6e/node_modules/.registry.npmjs.org/busboy/0.2.14/node_modules/busboy/lib/types/multipart.js:213:13)
at PartStream.emit (events.js:180:13)
at HeaderParser. (/rbd/pnpm-volume/0be69ac9-e198-4833-8239-78fa0c4fbf6e/node_modules/.registry.npmjs.org/dicer/0.2.5/node_modules/dicer/lib/Dicer.js:51:16)
at HeaderParser.emit (events.js:180:13)
at HeaderParser._finish (/rbd/pnpm-volume/0be69ac9-e198-4833-8239-78fa0c4fbf6e/node_modules/.registry.npmjs.org/dicer/0.2.5/node_modules/dicer/lib/HeaderParser.js:68:8)

Would be super grateful for every hint, maybe also on advices on how to code better in Express as I just started. I tried uploading the file to a local directory instead of the memory already, but that didn’t change it either.

Thanks in advance!

3

I don’t know for sure but I think the solution is that the name of the input field file(fileToUpload) doesn’t correspond with name in upload.single(‘test’).

In conclusion change fileToUpload to test or change ‘test’ to ‘fileToUpload’.

1 Like
4

I tried it and it changed the error to ‘Cannot convert object to primitive value’. So then I tried the Datauri approach and it finally gave me some output, but it was all gibberish and I didn’t find a way to see the filesize. Now I removed the Datauri part from my program again and suddenly it’s working! I don’t know what changed but thanks guys. Pretty sure it was my naming problem.

5

Ok, figured that out as well. After it didn’t work initially, I inserted a line that printed req.file and req.body to the console. As both are objects, I needed to include a JSON.stringify() for them and now everything works :blush:

1 Like
6

Hello spreeni!
I have the same problem, but i can’t fix it.
Can you give me the code of “inserted a line that printed req.file and req.body to the console. As both are objects, I needed to include a JSON.stringify()” ?
My English is so bad, sorry, many thanks!!

7

The file name used in the Multer middleware needs to be the same name in the route as it is in the HTML input.

server.js
app.post(’/api/fileanalyse’, upload.single(‘upfile’), (req, res) => { …

index.html
< input id=“inputfield” type=“file” name=“upfile” >

Notice the name ‘upfile.’

1 Like