So, I want to upload form data including files to server.
html:
<ion-content class="padding">
<form name="categoryForm" ng-submit="fnAddCategory(category)" novalidate>
<div class="list">
<label class="item item-input item-floating-label">
<span class="input-label">Category Name</span>
<input type="text" placeholder="category Name" name="name1" ng-model="category.catname" required>
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Category Image</span>
<br>
<input type="file" name="categoryImg" accept="image/*" ng-model="category.img" required>
</label>
<span style="color:red" ng-show="categoryForm.name1.$dirty && categoryForm.name1.$invalid">
<span ng-show="categoryForm.name1.$error.required">Category name is required.</span>
</span>
</div>
<button class="button button-block button-outline button-positive" ng-hide="categoryForm.name1.$error.required" type="submit"> Submit
</button>
</form>
</ion-content>
Controller:
angular.module('ionicApp.addCategory', [])
.controller('addCategoryController', function ($scope, $state, $http) {
var compId = localStorage.getItem("compid");
$scope.fnAddCategory = function (val) {
var fd = new FormData();
fd.append('CategoryImage',val.img);
fd.append('CompanyID', compId);
fd.append('CategoryName', val.catname);
fd.append('CategoryStatus', 1);
$http.post('http://localhost:3208/api/AddEditCategory', fd, {
withCredentials: true,
transformRequest: angular.identity,
headers: {'Content-Type': undefined }
}).success(function (data) {
console.log(JSON.stringify(data));
}).error(function () {
});
};
});
WebServiceCode:
[HttpPost]
public async Task<HttpResponseMessage> PostFormData()
{
// Check if the request contains multipart/form-data.
if (!Request.Content.IsMimeMultipartContent())
{
throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);
}
string root = HttpContext.Current.Server.MapPath("~/uploads");
var streamProvider = new MyStreamProvider(root);
try
{
// Read the form data.
await Request.Content.ReadAsMultipartAsync(streamProvider);
TbzProductCategory category = new TbzProductCategory();
foreach (MultipartFileData file in streamProvider.FileData)
{
if (file.Headers.ContentDisposition.Name == "\"CategoryImage\"")
{
category.CategoryImage = file.Headers.ContentDisposition.FileName.Replace("\"", "");
}
}
try
{
category.CategoryName = streamProvider.FormData["CategoryName"];
category.CompanyID = Convert.ToDecimal(streamProvider.FormData["CompanyID"]);
category.CategoryStatus = 1;
db.TbzProductCategories.Add(category);
db.SaveChanges();
}
catch (Exception e)
{
return Request.CreateErrorResponse(HttpStatusCode.InternalServerError, e);
}
return Request.CreateResponse(HttpStatusCode.OK, category);
}
catch (System.Exception e)
{
return Request.CreateErrorResponse(HttpStatusCode.InternalServerError, e);
}
}
Problem: I am not able to get files on my web service. I am getting the rest of my form data. Please help me solve this problem.