How to submit post data with ng2 file upload in angular 2? Form values and uploaded docs should be bundled into single object and sent to API. #690

New Issue

2017-03-21T11:23:28Z

ravirajhalli commented

2017-03-21 11:23:28 +00:00

(Migrated from github.com)

I have a user creation form where I should submit form values and uploaded docs to the controller using submit button. Controller passes that data to a service where API URL is defined.
The controller should receive form values and documents uploaded objects.
I tried with
const formData = new FormData(); then append form data and uploader object to formData. formData should be an object containing form values and files uploaded.FormData object is sent to API where form values and files are accessed seperately.
Refererred :http://stackoverflow.com/questions/38502687/how-to-submit-post-data-with-ng2-file-upload-in-angular-2

- I have a user creation form where I should submit form values and uploaded docs to the controller using submit button. Controller passes that data to a service where API URL is defined. The controller should receive form values and documents uploaded objects. I tried with `const formData = new FormData();` then append form data and uploader object to formData. formData should be an object containing form values and files uploaded.FormData object is sent to API where form values and files are accessed seperately. Refererred :[http://stackoverflow.com/questions/38502687/how-to-submit-post-data-with-ng2-file-upload-in-angular-2](url)

👍 2

amitgaur208 commented

2017-04-21 11:45:34 +00:00

(Migrated from github.com)

You can send extra parameters like this in formData:-

var uploader = new FileUploader({
url: "user/filesupload",
type: 'post',
formData: [{master: master, user_id: $scope.current_instance, folder_id: $scope.parent_id}],
headers: {
'Authorization': 'Basic 123445'
},
});

You can send extra parameters like this in formData:- var uploader = new FileUploader({ url: "user/filesupload", type: 'post', formData: [{master: master, user_id: $scope.current_instance, folder_id: $scope.parent_id}], headers: { 'Authorization': 'Basic 123445' }, });

👎 28

teddymro commented

2017-05-15 16:02:50 +00:00

(Migrated from github.com)

Add form data as additionalParameter, see FileUploaderOptions interface:
additionalParameter?: { [key: string]: any; }
like so:
document.setOptions({ headers: [{name: 'name', value: 'value'}], additionalParameter: { documentType: 'document type' }
more to read: https://github.com/valor-software/ng2-file-upload/blob/development/src/file-upload/file-uploader.class.ts#L293

Hope it helps.

Add form data as additionalParameter, see FileUploaderOptions interface: `additionalParameter?: { [key: string]: any; }` like so: `document.setOptions({ headers: [{name: 'name', value: 'value'}], additionalParameter: { documentType: 'document type' }` more to read: https://github.com/valor-software/ng2-file-upload/blob/development/src/file-upload/file-uploader.class.ts#L293 Hope it helps.

👍 1 👎 3

drewwiens commented

2017-10-02 20:52:38 +00:00

(Migrated from github.com)

See @msfanous post here for a working example of how to add form data

See [@msfanous post here](https://github.com/valor-software/ng2-file-upload/issues/241) for a working example of how to add form data

👍 6

Sign in to join this conversation.