When uploading an image using the file input type along with other user data, my model includes the User class:
public class User
{
public int Id { get; set; }
public string Name { get; set; }
public int Rollno { get; set; }
public byte[] ProfileImage { get; set; }
public HttpPostedFile image { get; set; }
}
And a method posted in ASP.NET MVC:
public ActionResult AddUser(User user)
{
var files = Request.Files;
foreach (string fileName in Request.Files)
{
HttpPostedFileBase file = Request.Files[fileName];
byte[] uploadFile = new byte[file.InputStream.Length];
}
return View();
}
An example of the input tag being used:
<input id="imgInp" type="file" aria-label="Add photos to your post" class="upload" name="file" onchange="angular.element(this).scope().LoadFileData(this.files)" multiple="" accept="image/*">
With an AngularJS controller that looks like this:
angular.module('app', ['AngularDemo.BeerController']).
controller('formController',['$scope','$http', function ($scope,$http) {
alert('in controller');
var formData = new FormData();
$scope.LoadFileData = function (files) {
for (var file in files) {
formData.append("file", files[file]);
}
};
$scope.submit = function () {
alert('in submit');
$http.post("/Home/AddUser", formData, {
withCredentials: true,
headers: { 'Content-Type': undefined },
transformRequest: angular.identity
}).success(function (response) {
});
}
}]);
The image file is successfully posting back in the AddUser method, but I am unsure how to send the model data. I have added ng-model="Name" etc in the form. How do I also send $scope.Name, along with the image data since my $http.post expects form data?