[Question] Uploading multipart/form-data

[JanHuege]

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>

[doivosevic]

+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]

please check, PR with such feature was merged and published

[Ancoron84]

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

[ssmartin]

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.

[dmarginian]

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"); };

[thehashrocket]

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

[dmarginian]

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]

@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]

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. }

[thehashrocket]

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