How to submit post data with ng2 file upload in angular 2?

Question

I am using ng2-file-upload in angular 2. Is there any way to submit my form data with file upload action?

Answer 1

This is NOT an answer, but I am having the same problem using ng2-file-upload. They have a hook called onBeforeUploadItem. I have tried the following.

ngOnInit() {
 this.uploader.onBeforeUploadItem = (fileItem: any) => {
  fileItem.formData.push( { someField: this.someValue } );
  fileItem.formData.push( { someField2: this.someValue2 } );
 };
}

When I log out the content of fileItem.formData all the values are there. However, these form elements seem to never make it back to the server. I am using Chrome and when I observe the HTTP post, I see the following.

Request Headers

POST /api/upload/csv HTTP/1.1
Host: localhost:8080
Connection: keep-alive
Content-Length: 228
Origin: http://localhost:4200
x-access-token: eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJyb290IiwiYWRkciI6IjA6MDowOjA6MDowOjA6MSIsInNjaGVtZSI6Imh0dHAiLCJwb3J0IjoiODA4MCIsImlhdCI6MTQ2OTUwMzM1NX0.jICVQdZD-6m705sZsaQJ5-51LztdIx9pAAKgVYgL3HRMMgrJh6ldFbYvUVtA_UQkSrvCrNJeWeo4C7QYe2W4Cw
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.82 Safari/537.36
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryCSUTihSBrgmwjxg1
Accept: */*
Referer: http://localhost:4200/main
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.8
Cookie: _ga=GA1.1.941072201.1467616449; token=eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJyb290IiwiYWRkciI6IjA6MDowOjA6MDowOjA6MSIsInNjaGVtZSI6Imh0dHAiLCJwb3J0IjoiODA4MCIsImlhdCI6MTQ2OTUwMzM1NX0.jICVQdZD-6m705sZsaQJ5-51LztdIx9pAAKgVYgL3HRMMgrJh6ldFbYvUVtA_UQkSrvCrNJeWeo4C7QYe2W4Cw

Request Payload

------WebKitFormBoundaryCSUTihSBrgmwjxg1
Content-Disposition: form-data; name="file"; filename="data.csv"
Content-Type: text/csv


------WebKitFormBoundaryCSUTihSBrgmwjxg1--

Any ideas what's going on? When I upload a file, I need to send some additional form values with that file.

I was pretty close. The solution was to override onBuildItemForm.

ngOnInit() {
 this.uploader.onBuildItemForm = (fileItem: any, form: any) => {
  form.append('someField', this.someValue); //note comma separating key and value
  form.append('someField2', this.someValue2);
 };
}

The instance form is of type FormData. By looking at my HTTP post, I can see my form field values being sent to the server, and my server actually sees the values now. Hope that helps you out.