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

Do you use JSON bodyparser in express? And what is wrong with [object Object]? what do you want it to be? — Haijin, Feb 26 '19 at 20:04
Yes I am. Normal strings are parsed perfectly. But when passing an object in an object, is comes out broken. I moved to using formData instead. — manneJan89, Feb 27 '19 at 06:56
I still do not know what you are complaining about. Can you access you data by req.body.myData? if you want to display as string, you can call JSON.stringify first. — Haijin, Feb 27 '19 at 15:53
Generally transferring data from or to streams cause this issue. You could stringify your event object and then emit the output. — Abhishek Singh, Feb 28 '19 at 12:40
Okay, maybe I asked the question wrong. Please see my edit in the answer. — manneJan89, Mar 01 '19 at 05:29
I understand your concern but while sending your data to the stream it automatically converts your object to string. Here in this case the first depth can be converted to string but when it tries to convert the 2nd level object to string then it comes out to be [object object]. In order to escalate this, you need to stringify the object initially then send it. — Abhishek Singh, Mar 01 '19 at 09:20
Thank you that makes sense. But when I stringify the data, and try to parse it in express, I get the error `Cannot convert object to primitive value`. But express sees it as a string and not and object — manneJan89, Mar 01 '19 at 10:13
are you trying to `console.log` it or while parsing it gives you this error? — Abhishek Singh, Mar 01 '19 at 10:36
while parsing. But I see what I did wrong, so it is actually working. Thanks — manneJan89, Mar 01 '19 at 10:57

score 1 · Accepted Answer · answered Mar 01 '19 at 11:33

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

score 0 · Answer 2 · answered Feb 28 '19 at 23:13

0

Can you try this code:

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

answered Feb 28 '19 at 23:13

Ismail Cherri

143
4

No, I don't want to return the files. I want to log the `request.body`, but the data in there is incorrect. – manneJan89 Mar 01 '19 at 05:31

score 0 · Answer 3 · answered Mar 01 '19 at 05:14

0

You can make use of body-parser.

In your app.js file

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

app.use(bodyParser.json());

answered Mar 01 '19 at 05:14

Adarsh

46
1
8

No, it is not a body parser issue. – manneJan89 Mar 01 '19 at 05:30

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

3 Answers3