ngx-uploader - Passing JSON data Object to uploadInput data, returning [object Object]

Question

I am using ngx-uploader and with the data section inside the uploadInput, I pass additional data:

startUpload(): void {
    const event: UploadInput = {
      type: 'uploadAll',
      url: this.uploadUrl,
      method: 'post',
      data: this.data,
      headers: { 'Authorization': 'Token ' + this.userToken }
    };

    this.uploadInput.emit(event);
  }

The problem is that the data I am passing looks like this

this.data = {
    myData: {
       isThereData: true
    }
}

When reading the res.body inside my express, my data is returned as [object Object].

router.post('/path', upload.any(), (req, res, next) => {
    console.log(req.body) // logs [object, Object]
})

I can stringify the data before sending it to express, but then I need to pass the data content type along with the data from ngx-uploader, which I am unsure how to do, or if it is even possible.

I know I cannot pass an object because of the UploadInput:

export interface UploadInput {
    ...
    data?: {
        [key: string]: string | Blob;
    };
    ...
}

Is there another way to go about this?

EDIT Okay, it seems that people are not understanding so maybe I asked the question wrong.

NB: It is not a body parser issue.

The issue is that my data contains objects, so the data comes out as [object Object].

My endpoint is in the original post above.

When my data looks like this, and I give it to my ngx-uploader:

let data = {
    greeting: 'hi',
    color: 'green',
    car: 'toyota',
}

In my express, when I log request.body, the data is perfect.

but when my data looks like this:

let data = {
    greeting: {
        hello: 'hi',
        goodbye: 'bye'
    },
    car: {
        type: 'toyota,
        color: 'green'
    }
}

In my express, when I log request.body, my data is returned as [Object object].

That is the issue. Now I can stringify the data, but when I then pass it through ngx-uploader, express does not know that it is JSON as ngx-uploader needs a content type passed with it. But I am passing an image with some data, and when changing the content type I get other errors and the image stops working.

So the issue lies with passing data in ngx-uploader via the data property of ngx-uploader

Answer 1

I understand your concern but while sending your data to the stream it automatically converts your object to a string. Here, in this case, the first depth can be converted to string but when it tries to convert the 2nd level object to a string then it comes out to be [object object]. In order to escalate this, you need to stringify the object initially then send it.

For more info regarding Cannot convert object to primitive value:

console.log is for logging strings or simple values

as the docs say, you can format the output, as a json for example console.log("body: %j", req.body)

or, better yet, use console.dir to log the object as it is

Answer 2

You can make use of body-parser.

In your app.js file

var bodyParser = require('body-parser');

app.use(bodyParser.json());

Answer 3

Can you try this code:

router.post('/path', upload.any(), (req, res, next) => {
    res.status(200).json(req.files);
});