ng2FileUpload library - adding multiple formData

Question

I added to 'uploader.onBeforeUploadItem' method code as below:

item.formData['creator'] = {
    id: user.id,
    name: user.name,
    avatar: user.avatar
};
item.formData['content'] = 'value';

And beside of that I add a file from input type file:

<form enctype="multipart/form-data">
    <div class="textfield" contenteditable [innerHTML]="content"></div>
    <div *ngIf="scope.imageLoaded" class="image-gallery">
        <div class="image-preview" [ngStyle]="{'background-image' : 'url(' + scope.addImgPath + ')'}"></div>
    </div>
    <button (click)="uploader.uploadAll()" class="btn right grey darken-4 send-message" type="submit">Send
        <i class="material-icons right">send</i>
    </button>
</form>

The problem is, when I try to refere to this values on the backend site, the only property I can get is that file. The other data are not visible there (req.body is undefined):

router.post('/add', (req, res) => {
    upload(req, res, (err) => {

        let newPost = new Post({
            content: req.body.content,
            creator: req.body.creator,
            post_date: Date.now(),
            rate: 0,
            users_liked: [],
            image: 'http://localhost:3000/uploads/' + req.file.filename
        });

        Post.addPost(newPost);
    });
});

When I check requests by console xhr tab, I see that the only sending data is file. How can I resolve this issue?

Possible duplicate of [Express.js req.body undefined](https://stackoverflow.com/questions/9177049/express-js-req-body-undefined) — ponury-kostek, Dec 03 '18 at 10:26

Tushar Walzade · Answer 1 · 2018-12-03T10:17:37.267

0

Update your onBeforeUplaodItem callback as follows -

onBeforeUploadItem(item: FileUploader | any) {
    item.formData.push({
        "creator": {
            id: user.id,
            name: user.name,
            avatar: user.avatar
        },
        "content": "value"
    });
}

You'll get a single JSON using the code above.

edited Dec 03 '18 at 10:17

answered Dec 03 '18 at 10:02

Tushar Walzade

3,737
4
33
56

Same, unfortunately. When I console.log item.formData before- all data are of course displaying. – Adam Jakś Dec 03 '18 at 10:11
are you sure that your `onBeforeUploadItem` callback is being called? please debug it if not. – Tushar Walzade Dec 03 '18 at 10:13
Yes, onBeforeUploadItem is being called after this.uploader.uploadAll() call. – Adam Jakś Dec 03 '18 at 10:14

ng2FileUpload library - adding multiple formData

1 Answers1