Multer: Error: Unexpected field

[aphavichitr]

Getting error unexpected field when uploading a file using AJAX in React

// Form inside React render function

// onChange event handler
handleChange(e) {
var formData = new FormData();
formData.append('file', e.target.files[0]);
console.log('File: ', e.target.files[0]);
console.log('Formdata: ',formData);
$.ajax({
url: 'http://localhost:3000',
data: formData,
type: 'POST',
contentType: false,
processData: false,
success: function(data) {
console.log('Data: ', data);
console.log('Successful Post!');
},
error: function(data) {
console.error('Post Failed!', data);
}
})

// Express post
app.post('/', upload.single('note'), function(req, res) {
console.log('Got request from react!');
console.log('Body: ', req.body);
console.log('File: ', req.file);
console.dir(req.headers['content-type']);

res.writeHead(headers);
res.end();
});

//
Error: Unexpected field
at makeError (/Users/andrewphavichitr/Documents/Git/notes-share-mvp/node_modules/multer/lib/make-error.js:12:13)
at wrappedFileFilter (/Users/andrewphavichitr/Documents/Git/notes-share-mvp/node_modules/multer/index.js:39:19)
at Busboy. (/Users/andrewphavichitr/Documents/Git/notes-share-mvp/node_modules/multer/lib/make-middleware.js:112:7)
at emitMany (events.js:127:13)
at Busboy.emit (events.js:201:7)
at Busboy.emit (/Users/andrewphavichitr/Documents/Git/notes-share-mvp/node_modules/busboy/lib/main.js:31:35)
at PartStream. (/Users/andrewphavichitr/Documents/Git/notes-share-mvp/node_modules/busboy/lib/types/multipart.js:213:13)
at emitOne (events.js:96:13)
at PartStream.emit (events.js:188:7)
at HeaderParser. (/Users/andrewphavichitr/Documents/Git/notes-share-mvp/node_modules/dicer/lib/Dicer.js:51:16)
at emitOne (events.js:96:13)
at HeaderParser.emit (events.js:188:7)
at HeaderParser._finish (/Users/andrewphavichitr/Documents/Git/notes-share-mvp/node_modules/dicer/lib/HeaderParser.js:68:8)
at SBMH. (/Users/andrewphavichitr/Documents/Git/notes-share-mvp/node_modules/dicer/lib/HeaderParser.js:40:12)
at emitMany (events.js:127:13)
at SBMH.emit (events.js:201:7)

[LinusU]

You are uploading your file as file (formData.append('file', e.target.files[0])) but expecting it as note (upload.single('note')), change them to match 👌

[aphavichitr]

Thanks LinusU!

[daslicht]

LinusU: that helped me either !

[dunwen]

helped me too

[visheshCuriousDev]

Hi,

app.use(multer({dest: __dirname+'/uploads'}).single('image'));

Using .single(file) it works and i am able to open it as image file but while downloading its not downloading as image file so i changed it to .single(image). Then this error appears ...

Error: Unexpected field
at makeError (/media/ionixx/532076ac-c1eb-44fc-9544-fc152199537c/nodejs_samples/node_modules/multer/lib/make-error.js:12:13)
at wrappedFileFilter (/media/ionixx/532076ac-c1eb-44fc-9544-fc152199537c/nodejs_samples/node_modules/multer/index.js:39:19)
at Busboy. (/media/ionixx/532076ac-c1eb-44fc-9544-fc152199537c/nodejs_samples/node_modules/multer/lib/make-middleware.js:113:7)
at emitMany (events.js:108:13)
at Busboy.emit (events.js:182:7)
at Busboy.emit (/media/ionixx/532076ac-c1eb-44fc-9544-fc152199537c/nodejs_samples/node_modules/busboy/lib/main.js:31:35)
at PartStream. (/media/ionixx/532076ac-c1eb-44fc-9544-fc152199537c/nodejs_samples/node_modules/busboy/lib/types/multipart.js:213:13)
at emitOne (events.js:77:13)
at PartStream.emit (events.js:169:7)
at HeaderParser. (/media/ionixx/532076ac-c1eb-44fc-9544-fc152199537c/nodejs_samples/node_modules/dicer/lib/Dicer.js:51:16)

While downloading i use res.download() where i mention the path of any file and it just downloads.

[kanalasumant]

@LinusU you are a genius.! Thank you. It's often not fully knowing what we do and doing it anyway gets us into these issues.

[antmihlin]

Helped me as well

Thank you @LinusU !

[geranim0]

Funny how I wasted about 8 hours before finding this comment

[JhonAmber]

Gracias @LinusU