[Question] Uploading multipart/form-data #12

New Issue

2015-12-19T19:06:21Z

JanHuege commented

2015-12-19 19:06:21 +00:00

(Migrated from github.com)

Is there a way to create a form in ng2 with your directive to upload the image and additional info like a username and stuff to a restapi?

Because I try to POST a user with an avatar using http to my Restapi and I can't get it to work. The api itself accepts multipart/form-data.

<div class="row">
                <div class="form-group col-xs-4 col-xs-offset-4">
                    <label for="image">Label</label>
                    <input type="file"
                    [(ngModel)]="wine.image"
                    ngControl="image" #image="ngForm">
                    <div [hidden]="image.valid" class="alert alert-danger">
                        Bild erforderlich!
                    </div>
                </div>
            </div>

Is there a way to create a form in ng2 with your directive to upload the image and additional info like a username and stuff to a restapi? Because I try to POST a user with an avatar using http to my Restapi and I can't get it to work. The api itself accepts multipart/form-data. ``` <div class="row"> <div class="form-group col-xs-4 col-xs-offset-4"> <label for="image">Label</label> <input type="file" [(ngModel)]="wine.image" ngControl="image" #image="ngForm"> <div [hidden]="image.valid" class="alert alert-danger"> Bild erforderlich! </div> </div> </div> ```

👍 4

doivosevic commented

2016-01-15 23:06:12 +00:00

(Migrated from github.com)

+1 for this idea. It would be very reasonable to be able to provide additional values with the request because you need more data when saving a file like I need artist name, year and other stuff

valorkin commented

2016-05-12 13:32:51 +00:00

(Migrated from github.com)

please check, PR with such feature was merged and published

Ancoron84 commented

2016-05-24 12:46:46 +00:00

(Migrated from github.com)

I couldn't find a multipart support in the last release version. This topic is still open ?

👍 3

ssmartin commented

2016-05-31 13:18:53 +00:00

(Migrated from github.com)

There was a merge error/problem on that PR, as far as I could see from the comments.
+1 for this feature as we need it too - thank you.

There was a merge error/problem on that PR, as far as I could see from the comments. +1 for this feature as we need it too - thank you.

👍 1

dmarginian commented

2016-06-01 15:12:19 +00:00

(Migrated from github.com)

I just pulled the latest from NPM and this is working. You can append additional form data by using the onBuildItemForm handler on FileUploader:

this._uploader.onBuildItemForm = (item, form) => {
form.append("key", "value");
};

I just pulled the latest from NPM and this is working. You can append additional form data by using the onBuildItemForm handler on FileUploader: this._uploader.onBuildItemForm = (item, form) => { form.append("key", "value"); };

👍 6 ❤️ 2 🎉 3

thehashrocket commented

2016-07-30 00:22:01 +00:00

(Migrated from github.com)

@dmarginian do you have an example of this working? Like with either drag/drop or just a single upload input?

dmarginian commented

2016-07-30 13:54:38 +00:00

(Migrated from github.com)

The code sample I posted is the relevant code needed to post additional form data. If you need example code on how to use the uploader in general I suggest looking at the demo source - https://github.com/valor-software/ng2-file-upload/tree/development/demo.

thehashrocket commented

2016-07-30 15:34:22 +00:00

(Migrated from github.com)

@dmarginian I guess what I'm trying to ask is how I use the code in context with the demo code? I'm not sure how the two work together?

dmarginian commented

2016-07-30 16:01:50 +00:00

(Migrated from github.com)

First, get a simple example working. The demo has a lot going on so that may be confusing you. In your simple example component you will instantiate a new Uploader - https://github.com/valor-software/ng2-file-upload/blob/development/demo/components/file-upload/simple-demo.ts. In your case you want to post additional form data so I assume you will have an uploader input (<input type="file" ng2FileSelect [uploader]="uploader" />) and several other inputs. You want to make the submit button on your form call a method in your component that gets the data from the form, uses the code I posted, and then calls uploadAll on your Uploader instance. Something like this (not tested):

<b>
private onFormSubmit() {
// write some code to get the data from the form here.
this.prepareUploader(your form data here);
this.uploader.uploadAll();
}

private prepareUploader(formData) {
this.uploader.onBuildItemForm = (item, form) => {
for (let key in formData) {
form.append(key, formData[key]);
}
};
// continue configuring uploader setting onSuccessItem, onCompleteAll, and other handlers.
}

First, get a simple example working. The demo has a lot going on so that may be confusing you. In your simple example component you will instantiate a new Uploader - https://github.com/valor-software/ng2-file-upload/blob/development/demo/components/file-upload/simple-demo.ts. In your case you want to post additional form data so I assume you will have an uploader input (`<input type="file" ng2FileSelect [uploader]="uploader" />`) and several other inputs. You want to make the submit button on your form call a method in your component that gets the data from the form, uses the code I posted, and then calls uploadAll on your Uploader instance. Something like this (not tested): ``` <b>``` private onFormSubmit() { // write some code to get the data from the form here. this.prepareUploader(your form data here); this.uploader.uploadAll(); } private prepareUploader(formData) { this.uploader.onBuildItemForm = (item, form) => { for (let key in formData) { form.append(key, formData[key]); } }; // continue configuring uploader setting onSuccessItem, onCompleteAll, and other handlers. } ```

👍 2 😕 1

thehashrocket commented

2016-07-30 16:27:40 +00:00

(Migrated from github.com)

oh wow, now i see it. that's pretty cool, thanks! :)

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: dc/ng2-file-upload#12