Kendo UI Angular Upload File to Backend as Node.JS - node.js

Question

I am using Kendo Upload Control to upload files to Node.js backend which used GridFS multer.
Angular
<kendo-upload
[saveField]="file"
[withCredentials]="false"
[saveUrl]="uploadUrl"
(autoUpload)="false"
[multiple]="false"
(select)="selectProfilePic($event)"></kendo-upload>
But the node.js API doesn't pick up the request. I am using [saveField]="file" to pass the uploaded file and the node.js below.
var storage = new GridFsStorage({
//url: mongoose.connection.client.s.url,
//options: options,
db: mongoose.connection,
file: (req, file) => {
return new Promise((resolve, reject) => {
myCrypto.randomBytes(16, (err, buf) => {
if (err) {
return reject(err);
}
const filename = buf.toString('hex') + path.extname(file.originalname);
const fileInfo = {
filename: filename,
bucketName: 'uploads'
};
resolve(fileInfo);
});
});
}
});
const upload = multer({ storage });
router.post('/upload', upload.single('file'), fileUpload);
module.exports = router;
function fileUpload(req, res) {
console.log("fileUpload")
try {
res.send({ file: req.file })
}
catch(err){
console.log(err);
res.send(err)
}
}
Logs
2019-07-21T19:34:33.679205+00:00 app[web.1]: File Controller
2019-07-21T19:34:33.680436+00:00 app[web.1]: {}
2019-07-21T19:34:33.983631+00:00 app[web.1]: MulterError: Unexpected
field 2019-07-21T19:34:33.983647+00:00 app[web.1]: at
wrappedFileFilter (/app/node_modules/multer/index.js:40:19)
2019-07-21T19:34:33.983649+00:00 app[web.1]: at Busboy.
(/app/node_modules/multer/lib/make-middleware.js:114:7)
2019-07-21T19:34:33.983650+00:00 app[web.1]: at Busboy.emit
(events.js:198:13) 2019-07-21T19:34:33.983670+00:00 app[web.1]: at
Busboy.emit (/app/node_modules/busboy/lib/main.js:38:33)
2019-07-21T19:34:33.983671+00:00 app[web.1]: at PartStream.
(/app/node_modules/busboy/lib/types/multipart.js:213:13)
2019-07-21T19:34:33.983673+00:00 app[web.1]: at PartStream.emit
(events.js:198:13) 2019-07-21T19:34:33.983674+00:00 app[web.1]: at
HeaderParser. (/app/node_modules/dicer/lib/Dicer.js:51:16)
2019-07-21T19:34:33.983675+00:00 app[web.1]: at HeaderParser.emit
(events.js:198:13) 2019-07-21T19:34:33.983677+00:00 app[web.1]: at
HeaderParser._finish
(/app/node_modules/dicer/lib/HeaderParser.js:68:8)
2019-07-21T19:34:33.983678+00:00 app[web.1]: at SBMH.
(/app/node_modules/dicer/lib/HeaderParser.js:40:12)
2019-07-21T19:34:33.983679+00:00 app[web.1]: at SBMH.emit
(events.js:198:13) 2019-07-21T19:34:33.983680+00:00 app[web.1]: at
SBMH._sbmh_feed (/app/node_modules/streamsearch/lib/sbmh.js:159:14)
2019-07-21T19:34:33.983682+00:00 app[web.1]: at SBMH.push
(/app/node_modules/streamsearch/lib/sbmh.js:56:14)
2019-07-21T19:34:33.983683+00:00 app[web.1]: at HeaderParser.push
(/app/node_modules/dicer/lib/HeaderParser.js:46:19)
2019-07-21T19:34:33.983685+00:00 app[web.1]: at Dicer._oninfo
(/app/node_modules/dicer/lib/Dicer.js:197:25)
2019-07-21T19:34:33.983686+00:00 app[web.1]: at SBMH.
(/app/node_modules/dicer/lib/Dicer.js:127:10)
2019-07-21T19:34:33.989908+00:00 heroku[router]: at=info method=POST
path="/v1/file/upload" host=herokuapp.com
request_id=aa1010df-d244-46bc-9b36-f8e437d5ad2a fwd="80.233.46.84"
dyno=web.1 connect=0ms service=312ms status=500 bytes=286
protocol=https

Answer 1

Is there any chance you had to set the field name to some file variable? So, I believe you expected [saveField]="file" to set field name to 'file' string but instead it searches for some this.filevariable which is undefined so you got field name set to the default 'files' value?

Answer 2

Followed #GProst suggestions and analysed a bit and the below fix worked and I don't know the solution yet.
As per the Kendo UI angular documentation,
Sets the FormData key which contains the files submitted to saveUrl.
The default value is files.
So, I just changed the parameter name from file to files and it worked.
const upload = multer({ storage });
router.post('/upload', upload.single('files'), fileUpload);