How to add another parameter to formdata in AngularJS - asp.net-mvc

Question

I am sending a file object to my server from angularJS like this -
var fd = new FormData();
fd.append('file', file);
var deferred = $q.defer();
$http.post(uploadUrl, fd, {
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
}).success(function(data, status, headers, config){
deferred.resolve(data);
})
.error(function(data, status, headers, config){
deferred.reject('some error occurred');
});
This is my Asp.Net MVC controller -
public HttpResponseMessage Post([FromBody]HttpPostedFileBase file)
I want to send one more parameter (say userId) with the same request. Is it possible to do so? How should I recieve it at the server end. I tried adding fd.append('userId', userId) to the formdata object, but it didn't work. Please tell how to achieve this.
Thanks in advance.
Edit1: When I do bind like I mention, I get below error:
Can't bind multiple parameters ('file' and 'userId') to the request'scontent.
Edit2: I also tried creating an object like so -
public class PostedInfo{
public HttpPostedFileBase file {get;set;}
public string userId {get;set;}
}
and changed post method to -
public HttpResponseMessage Post([FromBody]PostedInfo fd)
But, now this error is thrown, which is quite obvious as the request is json -
The request entity's media type 'multipart/form-data' is not supported for this resource.
Not sure how to tell tell that fd.file is a multipart/form-data entity.

Answer 1

I finally figured this out. The issue is that HttpPostedFileBase seems to not work quite well with webapi, so instead one should use MultipartFormDataStreamProvider for this. Code below -
[HttpPost]
public async Task<HttpResponseMessage> Post()
{
if (Request.Content.IsMimeMultipartContent())
{
string path = HttpContext.Current.Server.MapPath("~/Resources");
var provider = new MultipartFormDataStreamProvider(path);
await Request.Content.ReadAsMultipartAsync(provider);
// get the additional parameter
var userId = provider.FormData.GetValues("userId").FirstOrDefault();
string filepath = provider.FileData[0].LocalFileName;
return <your_custom_response_here>;
}
Here, you can see, I also got the userId in the server code apart from uploading the file.
Well, MultipartFormDataStreamProvider will save the file with a cryptic name (BodyPart_...). You can get rid of that by building your own CustomMultipartFormDataStreamProvider. Found an awesome link as to how to format the file name while saving. Worth a read.