Correct way of adding additionalParamater #673

New Issue

2017-03-14T21:23:25Z

hakalb commented

2017-03-14 21:23:25 +00:00

(Migrated from github.com)

I try to use additionalParameters to upload more information to my MVC5 Web Api.

this.uploaderOptions.additionalParameter = { 'app': 'fibi', 'user': 'me' };
this.uploader.setOptions(this.uploaderOptions);

But my payload looks a bit odd and my web api method crashes when I add the extra parameters.

------WebKitFormBoundaryxXDzjn8HDfr3z96B
Content-Disposition: form-data; name="file"; filename="PORTF_test.DAT"
Content-Type: application/octet-stream

------WebKitFormBoundaryxXDzjn8HDfr3z96B
Content-Disposition: form-data; name="app"

fibi
------WebKitFormBoundaryxXDzjn8HDfr3z96B
Content-Disposition: form-data; name="user"

me
------WebKitFormBoundaryxXDzjn8HDfr3z96B--

Why aren't my parameters in the first section like filename?
Thankful for any help.

I try to use additionalParameters to upload more information to my MVC5 Web Api. `this.uploaderOptions.additionalParameter = { 'app': 'fibi', 'user': 'me' };` `this.uploader.setOptions(this.uploaderOptions);` But my payload looks a bit odd and my web api method crashes when I add the extra parameters. ------WebKitFormBoundaryxXDzjn8HDfr3z96B Content-Disposition: form-data; name="file"; filename="PORTF_test.DAT" Content-Type: application/octet-stream ------WebKitFormBoundaryxXDzjn8HDfr3z96B Content-Disposition: form-data; name="app" fibi ------WebKitFormBoundaryxXDzjn8HDfr3z96B Content-Disposition: form-data; name="user" me ------WebKitFormBoundaryxXDzjn8HDfr3z96B-- Why aren't my parameters in the first section like filename? Thankful for any help.

👍 1

weishiny commented

2017-03-25 16:21:47 +00:00

(Migrated from github.com)

I have the question about how to use additionalParameter as well, has anyone used additionalParameter and it's working?? Thanks

hong-duc commented

2017-04-03 01:29:18 +00:00

(Migrated from github.com)

@weishiny It work, my backend is expressjs and I just do

this._uploader.setOptions({
            additionalParameter: { hello: 'world' }
        })

And just get it in the body console.log(req.body.hello);

@weishiny It work, my backend is expressjs and I just do ``` this._uploader.setOptions({ additionalParameter: { hello: 'world' } }) ``` And just get it in the body `console.log(req.body.hello);`

👍 4 ❤️ 1 🎉 5 🚀 1

hakalb commented

2017-04-03 09:50:29 +00:00

(Migrated from github.com)

@weishiny I used an alternative approach since I did not get it to work with additionalParameter.

In my angular code I added my own headers

this.uploaderOptions.url = this.apiUrl;
this.uploaderOptions.headers = [];
this.uploaderOptions.headers.push({ name: 'App', value: this.application });
this.uploaderOptions.headers.push({ name: 'ItemId', value: this.itemId });
this.uploader.setOptions(this.uploaderOptions);

and then I extracted those inside my MVC5 WebApi

string appFromHeader = null;
string idFromHeader = null;
IEnumerable<string> headerValues;

// Get App
if (Request.Headers.TryGetValues("App", out headerValues))
{
     appFromHeader = headerValues.FirstOrDefault();
}
// Get Id
if (Request.Headers.TryGetValues("ItemId", out headerValues))
{
     idFromHeader = headerValues.FirstOrDefault();
}

Works perfectly for me.

@weishiny I used an alternative approach since I did not get it to work with additionalParameter. In my angular code I added my own headers this.uploaderOptions.url = this.apiUrl; this.uploaderOptions.headers = []; this.uploaderOptions.headers.push({ name: 'App', value: this.application }); this.uploaderOptions.headers.push({ name: 'ItemId', value: this.itemId }); this.uploader.setOptions(this.uploaderOptions); and then I extracted those inside my MVC5 WebApi string appFromHeader = null; string idFromHeader = null; IEnumerable<string> headerValues; // Get App if (Request.Headers.TryGetValues("App", out headerValues)) { appFromHeader = headerValues.FirstOrDefault(); } // Get Id if (Request.Headers.TryGetValues("ItemId", out headerValues)) { idFromHeader = headerValues.FirstOrDefault(); } Works perfectly for me.

weishiny commented

2017-04-06 01:47:43 +00:00

(Migrated from github.com)

@hakalb and @hong-duc ,
thanks you guys a lot, I will try it when I implement the upload file function.

@hakalb and @hong-duc , thanks you guys a lot, I will try it when I implement the upload file function.

stephenad commented

2017-10-11 13:26:07 +00:00

(Migrated from github.com)

@hakalb

Do you have a working plunker of your additional parameters setup so I can see how it all connects?

Thanks
Andy

@hakalb Do you have a working plunker of your additional parameters setup so I can see how it all connects? Thanks Andy

hakalb commented

2017-10-11 13:55:57 +00:00

(Migrated from github.com)

@stephenad No sorry, I only got in my project.

stephenad commented

2017-10-11 15:04:36 +00:00

(Migrated from github.com)

@hakalb ,

No problem, this is what I have, can you see how I can output my values to the table:

I declared my file uploader:

public uploaderOptions:FileUploader = new FileUploader({url: URL});

Then I have set the items similar to what you have above:

this.uploader.options.headers =[]; this.uploader.options.headers.push({ name: 'renyear', value: this.dSelectedRenYear }); this.uploader.options.headers.push({ name: 'RenClassification', value: this.dSelectedBusClass }); this.uploader.options.headers.push({ name: 'dBusClass', value: this.dSelectedClassification }); this.uploader.setOptions(this.uploader);
I can then see in my console the values I push into the headers array, but in my code where I have the table my for loop looks at the uploader.queue so I do not know how to get my values out.

Below html where i am trying to output the table I have the following:

`

//
Name
Renewal Year
Business Class
Renewal Classification
Size
Progress
Status
Actions

<tr *ngFor="let item of this.uploader.queue">
{{ item?.file?.name }}
{{ item?.options?.headers[0].value }}
{{ item?.options?.headers[1].value }}
{{ item?.options?.headers[2].value }}
{{ item?.file?.size/1024 | number:'.2' }} KB

...
`

This is what I can seen when I do a console.dir of this.uploader

headers : Array(3) 0 : {name: "renyear", value: "2016"} 1 : {name: "RenClassification", value: "PROPERTY"} 2 : {name: "dBusClass", value: "CLAIMS"} length : 3

This is what my table looks like

Any ideas on how to display my 3 values on the table along side the file size and name?

Thanks in Advance

@hakalb , No problem, this is what I have, can you see how I can output my values to the table: I declared my file uploader: `public uploaderOptions:FileUploader = new FileUploader({url: URL});` Then I have set the items similar to what you have above: ` this.uploader.options.headers =[]; this.uploader.options.headers.push({ name: 'renyear', value: this.dSelectedRenYear }); this.uploader.options.headers.push({ name: 'RenClassification', value: this.dSelectedBusClass }); this.uploader.options.headers.push({ name: 'dBusClass', value: this.dSelectedClassification }); this.uploader.setOptions(this.uploader); ` I can then see in my console the values I push into the headers array, but in my code where I have the table my for loop looks at the uploader.queue so I do not know how to get my values out. Below html where i am trying to output the table I have the following: ` //<tr> <th width="50%">Name</th> <th>Renewal Year</th> <th>Business Class</th> <th>Renewal Classification</th> <th>Size</th> <th>Progress</th> <th>Status</th> <th>Actions</th> </tr> </thead> <tbody> <tr *ngFor="let item of this.uploader.queue"> <td><strong>{{ item?.file?.name }}</strong></td> <td><strong>{{ item?.options?.headers[0].value }}</strong></td> <td><strong>{{ item?.options?.headers[1].value }}</strong></td> <td><strong>{{ item?.options?.headers[2].value }}</strong></td> <td nowrap>{{ item?.file?.size/1024 | number:'.2' }} KB</td> ... ` This is what I can seen when I do a console.dir of this.uploader ` headers : Array(3) 0 : {name: "renyear", value: "2016"} 1 : {name: "RenClassification", value: "PROPERTY"} 2 : {name: "dBusClass", value: "CLAIMS"} length : 3 ` This is what my table looks like ![file uploaderjpg](https://user-images.githubusercontent.com/30697934/31448973-a006a772-ae9d-11e7-9e95-81d13c13ff3b.JPG) Any ideas on how to display my 3 values on the table along side the file size and name? Thanks in Advance

waleed-shahzaib commented

2018-01-08 14:59:35 +00:00

(Migrated from github.com)

thanks @hong-duc for the solution.

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: dc/ng2-file-upload#673