title: Uploading file to controller using typescript
body: <p>I am using <strong>ASP.NET MVC 5</strong> for the back-end and <strong>Angular + Typescript</strong> for the front-end of a web application.</p>
  
  <p>I am trying to upload a file to the server, but for some reason the controller is not getting the file as parameter (the parameter in the controller is null).</p>
  
  <p>I'm sharing below code.</p>
  
  <p>Thanks in advance!</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;input id="filePath" name="filePath" type="file" accept="image/*" /&gt;
  &lt;a id="uploadImage" ng-click="ctrl.uploadFile()"&gt;Upload&lt;/a&gt;
  </code></pre>
  
  <p>Typescript:</p>
  
  <pre><code>// controller class:
  uploadFile(): void {
      var filePathInput: any = $("#filePath");
      if (filePathInput[0].files) {
          var file: any = filePathInput[0].files[0];
          var resource: any = this.service.uploadFile();
          resource.save(file, (result: any) =&gt; {
              if (!result || !result.success) {
                  alert("error");
              } else {
                  alert("ok");
              }
          });
      }
  }
  
  // service class:
  uploadFile(): ng.resource.IResourceClass&lt;IMyResource&gt; {
      return this.$resource("/MyController/UploadImage", null, { method: "POST" });
  }
  </code></pre>
  
  <p>Backend Controller:</p>
  
  <pre><code>[HttpPost]
  public JsonResult UploadImage([FromBody]HttpPostedFileBase file)
  {
      if (file == null || file.ContentLength == 0)
      {
          return NullParameterResponse();
      }
      else
      {
          file.SaveAs("/img/" + Path.GetFileName(file.FileName));
          return SuccessResponse();
      }
  }
  </code></pre>