how to upload file with ng-file-upload in asp.mvc - asp.net-mvc

Question

how to upload file with ng-file-upload in asp.mvc ?
I'm using this code to upload file with ng-file-upload in asp.mvc :
public class HomeController : Controller, IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
bool result;
try
{
HttpPostedFile file = context.Request.Files[0];
if (file.ContentLength > 0)
{
string nameFile = Guid.NewGuid().ToString("N") + Path.GetExtension(file.FileName);
var path = Path.Combine(Server.MapPath(Url.Content("~/Temp/")), nameFile);
file.SaveAs(path);
}
result = true;
}
catch (Exception exception)
{
result = false;
}
context.Response.Write(result);
}
public bool IsReusable
{
get
{
return false;
}
}
}
script :
$scope.$watch('file', function (file) {
if (file&&!file.$error) {
$scope.upload($scope.file);
}
});
$scope.upload = function (file) {
Upload.upload({
url: getBaseUrl() + 'Home/ProcessRequest',
file: file
}).progress(function(evt) {
$scope.progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
console.log('progress: ' + $scope.progressPercentage + '% ' + evt.config.file.name);
}).success(function (data, status, headers, config) {
console.log('file ' + config.file.name + 'uploaded. Response: ' + data);
}).error(function (data, status, headers, config) {
console.log('error status: ' + status);
});
};
error :
POST http://localhost:1726/Home/ProcessRequest 500 (Internal Server Error)
No parameterless constructor defined for this object.
edit :
I'm using this code :
public class HomeController : Controller
{
[HttpPost]
[AllowUploadSpecialFilesOnly(".pdf,.doc,.docx,ppt,pptx,.mp3")]
public JsonResult Resume(HttpPostedFileBase file)
{
bool result;
try
{
if (file != null && file.ContentLength > 0 && file.FileName != null)
{
string nameFile = Guid.NewGuid().ToString("N") + Path.GetExtension(file.FileName);
var path = Path.Combine(Server.MapPath(Url.Content("~/Temp/")), nameFile);
file.SaveAs(path);
}
result = true;
}
catch (Exception exception)
{
result = false;
}
return Json(new
{
Result = result
}, JsonRequestBehavior.AllowGet);
}
}
html :
<form class="form-horizontal text-center" role="form" name="upload_form" >
<div class="form-group">
<div class="btn btn-primary" ngf-pattern="'.pdf,.doc,.docx,ppt,pptx,.mp3,.apk'" ngf-select ng-model="file">Send</div>
</div>
<span class="progress" ng-show="file.progress >= 0">
<div class="ng-binding" style="width:{{file.progress}}%" ng-bind="file.progress + '%'"></div>
</span>
</form>
scropt :
$scope.upload = function (file) {
Upload.upload({
url: getBaseUrl() + 'Home/Resume',
file: file
}).progress(function(evt) {
$scope.progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
console.log('progress: ' + $scope.progressPercentage + '% ' + evt.config.file.name);
}).success(function (data, status, headers, config) {
console.log('file ' + config.file.name + 'uploaded. Response: ' + data);
}).error(function (data, status, headers, config) {
console.log('error status: ' + status);
});
};
this is fine. But progressPercentage is always 100% but the file is being uploaded

Answer 1

here master https://github.com/danialfarid/ng-file-upload
and see tutorial http://jsfiddle.net/danialfarid/0mz6ff9o/135/
STEP 0 follow the tutorial step above
STEP 1
modif url parameter in index.cshtml
url: '#Url.Action("UploadDocument")',
file.upload = Upload.upload({
url: '#Url.Action("UploadDocument")',
data: {
File: file,
Description:'test'
}
});
STEP 2
in c# Controller create UploadDocument(UploadRq data)
public JsonResult UploadDocument(UploadRq data)
{
//your code
//string filename = Path.GetFileName(data.File.FileName);
//data.File.SaveAs(Server.MapPath("~/DocumentUploaded/") + filename);
return Json("Saved", JsonRequestBehavior.AllowGet);
}
STEP 3
create class UploadRq.cs
public class UploadRq
{
public HttpPostedFileBase File { get; set; }
public string Description { get; set; }
}