Kendo UI Angular Upload File to Backend as 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

Can you show some request logs? Like what is the response status/error message? — GProst
– GProst, Commented Jul 21, 2019 at 19:16
500 Internal Server Error and I am not getting any detailed error message. — Hary
– Hary, Commented Jul 21, 2019 at 19:21
@GProst, If you see the updated code, I've changed fileUpload method a bit and I noticed that the fileUpload is not been hit. — Hary
– Hary, Commented Jul 21, 2019 at 19:24
Do you have error details in Node logs? Perhaps you can create a global error handler in your Express app to catch and log the error. Also, check (with console logs) if you get inside the function where you generate file name (in Promise). — GProst
– GProst, Commented Jul 21, 2019 at 19:27
expressjs.com/en/guide/error-handling.html Check 'The default error handler' section. Add some logger there — GProst
– GProst, Commented Jul 21, 2019 at 19:30

GProst · Accepted Answer · 2019-07-21 20:46:06Z

2

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?

answered Jul 21, 2019 at 20:46

GProst

10.3k3 gold badges28 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Hary Over a year ago

Great! That's the reason.. [saveField]="'file'" worked

Hary · Accepted Answer · 2019-07-21 20:00:00Z

0

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);

answered Jul 21, 2019 at 20:00

Hary

5,8368 gold badges49 silver badges91 bronze badges

2 Comments

GProst Over a year ago

That's strange, saveField should have worked. I haven't used Kendo UI but didn't find any open issues in their GitHub repo about any problems with setting field name

Hary Over a year ago

Yes, but it didn't work and maybe I can report this to Kendo

Collectives™ on Stack Overflow

Kendo UI Angular Upload File to Backend as Node.JS

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related