File upload using AnguarJS - ajax

Question

I wanted to upload image in an AJAX manner and did so with reference to this Article
What I have done:
Controller:
$scope.uploadImage = function () {
var result;
var formdata = new FormData();
var fileInput = document.getElementById('fileInput');
for (var i = 0; i < fileInput.files.length; i++) {
formdata.append(fileInput.files[i].name, fileInput.files[i]);
}
var xhr = new XMLHttpRequest();
xhr.open('POST', '/Common/Image_upload?imageType=' + $scope.imageType);
xhr.send(formdata);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseText);
}
}
};
View:
<form id="uploader" ng-submit="uploadImage()">
<input id="fileInput" type="file">
<input type="submit" value="Upload file" />
</form>
MVC Controller:
[HttpPost]
public JsonResult Image_upload(string imageType)
{
....
success = ProductImage_insert(Image);
message = success ? "Image uploaded successfully!" : "Image was not uploaded!";
return Json(message, JsonRequestBehavior.AllowGet);
}
Requirement:
I need to catch this JSON response in the controller, how can I do it?
Thanks in advance.

Answer 1

You can do it in a angular way:
$scope.uploadImage = function () {
var fileInput = document.getElementById('fileInput');
var messageHeaders = { 'Content-Type': 'application/x-www-form-urlencoded' };
messageHeaders['X-File-Name'] = encodeURI(fileInput.files[0].name);
messageHeaders['X-File-Type'] = encodeURI(fileInput.files[0].type);
var fileData = fileInput.files[0];
$http({
url: '/Common/Image_upload',
method: "POST",
data: fileData,
headers: messageHeaders
}).success(function (data, status, headers, config) {
// do what you want with the response
});
}
on the server read Request.InputStream for a file content
[HttpPost]
public virtual ActionResult Image_upload(productType)
{
var xfileName = HttpUtility.UrlDecode(Request.Headers["X-File-Name"]);
var xfileType = HttpUtility.UrlDecode(Request.Headers["X-File-Type"]);
var inputStream = Request.InputStream;
var fileLenght = (int)inputStream.Length;
var bytes = new byte[fileLenght];
Request.InputStream.Read(bytes, 0, fileLenght);
System.IO.File.WriteAllBytes(Server.MapPath("/MyFiles/" + xfileName), bytes);
// return status code 200 or any other data
return new HttpStatusCodeResult(200);
}