Unexpected field error using Fetch API
- 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 Picture
Year Painted
Author Name
Submit
Contributor 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