如何在asp.mvc中使用ng-file-upload上传文件

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; }
   }