title: how to upload file with ng-file-upload in asp.mvc
body: <p>how to upload file with ng-file-upload in asp.mvc ?</p>
  
  <p>I'm using this code to upload file with ng-file-upload in asp.mvc :</p>
  
  <pre><code>public class HomeController : Controller, IHttpHandler
      {
          public void ProcessRequest(HttpContext context)
          {
              bool result;
              try
              {
                  HttpPostedFile file = context.Request.Files[0];
                  if (file.ContentLength &gt; 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;
              }
          }
      }
  </code></pre>
  
  <p>script :</p>
  
  <pre><code> $scope.$watch('file', function (file) {
      if (file&amp;&amp;!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);
      });
  };
  </code></pre>
  
  <p>error :</p>
  
  <p>POST <a href="http://localhost:1726/Home/ProcessRequest" rel="nofollow">http://localhost:1726/Home/ProcessRequest</a> 500 (Internal Server Error)
  No parameterless constructor defined for this object.</p>
  
  <p>edit :</p>
  
  <p>I'm using this code : </p>
  
  <pre><code>   public class HomeController : Controller
      {
          [HttpPost]
          [AllowUploadSpecialFilesOnly(".pdf,.doc,.docx,ppt,pptx,.mp3")]
          public JsonResult Resume(HttpPostedFileBase file)
          {
              bool result;
              try
              {
                  if (file != null &amp;&amp; file.ContentLength &gt; 0 &amp;&amp; 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);
          }
       }
  </code></pre>
  
  <p>html :</p>
  
  <pre><code>&lt;form class="form-horizontal text-center" role="form" name="upload_form" &gt;
      &lt;div class="form-group"&gt;
          &lt;div class="btn btn-primary" ngf-pattern="'.pdf,.doc,.docx,ppt,pptx,.mp3,.apk'" ngf-select ng-model="file"&gt;Send&lt;/div&gt;
      &lt;/div&gt;
      &lt;span class="progress" ng-show="file.progress &gt;= 0"&gt;
          &lt;div class="ng-binding" style="width:{{file.progress}}%" ng-bind="file.progress + '%'"&gt;&lt;/div&gt;
      &lt;/span&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>scropt :</p>
  
  <pre><code>  $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);
                  });
              };
  </code></pre>
  
  <p>this is fine. But <code>progressPercentage</code> is always 100% but the file is being uploaded</p>