formData excluding file is undefined on the backend side #1064

New Issue

2018-12-03T09:52:21Z

adamjaks commented

2018-12-03 09:52:21 +00:00

(Migrated from github.com)

Hi,
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?

Hi, 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?

vitamink commented

2019-04-07 14:19:23 +00:00

(Migrated from github.com)

Hi, had the same problem today. From looking through the source code it looks like item.formData is not referenced when sending the file (or anywhere else in the code).

I did get this working by overriding the onBuildItemForm method.

The solution is:

Set the override in the constructor

this.uploader.onBuildItemForm = this.onBuildItemForm.bind(this);

Then add the class method

private onBuildItemForm(fileItem: FileItem, form: FormData): any {
    form.append('siteId', this.site.id);
    return { fileItem, form };
}

On the web-server end I can now see the siteId parameter.

In your case, change the code slightly with the desired key/value pairs, creator and content.

Hi, had the same problem today. From looking through the source code it looks like `item.formData` is not referenced when sending the file (_or anywhere else in the code_). I did get this working by overriding the `onBuildItemForm` method. The solution is: Set the override in the constructor ``` this.uploader.onBuildItemForm = this.onBuildItemForm.bind(this); ``` Then add the class method ``` private onBuildItemForm(fileItem: FileItem, form: FormData): any { form.append('siteId', this.site.id); return { fileItem, form }; } ``` On the web-server end I can now see the siteId parameter. In your case, change the code slightly with the desired key/value pairs, _creator_ and _content_.

👍 2

MartinJHItInstituttet commented

2019-09-12 12:19:58 +00:00

(Migrated from github.com)

@vitamink Thanks for this. Now I can add the form data I need :)

PocoMin commented

2020-04-01 09:49:10 +00:00

(Migrated from github.com)

Add form data as additionalParameter in FileUploaderOptions works for me

var options: FileUploaderOptions = {
  url: "xxx",
  method: "POST",
  authToken: "Bearer xxx",
  additionalParameter: {siteId: this.site.id},
};
uploader.setOptions(options);

Reference: https://github.com/valor-software/ng2-file-upload/issues/924

Add form data as **additionalParameter** in **FileUploaderOptions** works for me ``` var options: FileUploaderOptions = { url: "xxx", method: "POST", authToken: "Bearer xxx", additionalParameter: {siteId: this.site.id}, }; uploader.setOptions(options); ``` _Reference_: https://github.com/valor-software/ng2-file-upload/issues/924

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: dc/ng2-file-upload#1064