expressjs / expressjs/multer

Unexpected field error using Fetch API

Open
#1,039 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
12.1k
Forks
1.1k
Avg merge
8d 2h
Merged PRs (30d)
21

Description

Im trying to use fetch API to send an image file to the server, but I get an "unexpected field error" :

Error:

MulterError: Unexpected field
at wrappedFileFilter (C:\Users\uriel\Desktop\fine-arts-querer\back-end\node_modules\multer\index.js:40:19)
at Busboy. (C:\Users\uriel\Desktop\fine-arts-querer\back-end\node_modules\multer\lib\make-middleware.js:114:7)
at Busboy.emit (node:events:394:28)
at Busboy.emit (C:\Users\uriel\Desktop\fine-arts-querer\back-end\node_modules\busboy\lib\main.js:38:33)
at PartStream. (C:\Users\uriel\Desktop\fine-arts-querer\back-end\node_modules\busboy\lib\types\multipart.js:213:13)
at PartStream.emit (node:events:394:28)
at HeaderParser. (C:\Users\uriel\Desktop\fine-arts-querer\back-end\node_modules\dicer\lib\Dicer.js:51:16)
at HeaderParser.emit (node:events:394:28)
at HeaderParser._finish (C:\Users\uriel\Desktop\fine-arts-querer\back-end\node_modules\dicer\lib\HeaderParser.js:68:8)
at SBMH. (C:\Users\uriel\Desktop\fine-arts-querer\back-end\node_modules\dicer\lib\HeaderParser.js:40:12)

server (post request with dataBase insert):

app.post('/', upload.single('picture'), (req, res) => {

const values = [req.body.paintName, req.body.yearPainted, req.body.authorName]
const updateQury = 'INSERT INTO paintings (name, year, authorname) VALUES ($1, $2, $3);'

pool.query(updateQury, values, (err, res) =>{
if(err){
console.log(err)
}
})

})

client:

const submitHandler = (e) => {
e.preventDefault()

const data = new FormData()
data.append("file", e.target['picture'].files[0])

const imgPostRequest = {
method: "POST",
body: data
}

fetch('http://localhost:5504/', imgPostRequest)
.catch((err) =>{
console.log(err)
})

}

react jsx html (whole form with other inputs, I'm trying to fetch just the name="picture" input):




Paint








Paint Picture



Paint Name




Year Painted



Author Name


Submit





Contributor guide

Open the contributing guide

Research direction

Start with the server's app.post('/', upload.single('picture'), ...) entry point and the client's submitHandler, especially data.append("file", ...). Trace the multipart field name through the request and compare it with the name accepted by the upload middleware. Done means the image request completes without MulterError: Unexpected field.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, node.js
Domain
api, backend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.