title: Upload a File using AngularJS to .NET Web API
body: <p>I referred some Stack overflow Questions and I tried the following code. The following code was not hitting the Web API. <strong>I tried with normal Text, then its hitting but not for the FILE</strong>. Finally I concluded the Web API Path and method all are fine, only issue is File. Kindly assist me how to upload File using AngularJS to .NET Web API.</p>
  
  <p>My HTML Code</p>
  
  <pre><code>&lt;input id="file_input_file" ng-files="getTheFiles($files)" type="file" accept=".csv" /&gt;
  
  &lt;input type="button" data-ng-click="ImplortCSVData()" id="btnMainLoginForm" value="Upload File" /&gt;
  </code></pre>
  
  <p>My AngularJS Directive for <code>ng-files</code> is</p>
  
  <pre><code>app.directive('ngFiles', ['$parse', function ($parse) {
  
      function fn_link(scope, element, attrs) {
          var onChange = $parse(attrs.ngFiles);
          element.on('change', function (event) {
              onChange(scope, { $files: event.target.files });
          });
      };
  
      return {
          link: fn_link
      }
  }]);
  </code></pre>
  
  <p>My AnagularJS Controller is</p>
  
  <pre><code>app.controller('ProcessCSVController', function ($rootScope, $scope, HTTPService) {
  
      $scope.CSVfile = {};
  
      $scope.getTheFiles = function ($files) {
          angular.forEach($files, function (value, key) {
              $scope.CSVfile.append(key, value);
          });
      };
  
      $scope.ImplortCSVData = function () {
          HTTPService.uploadCSV($scope.CSVfile).then(function (result) {
              alert("CSV");
          });
      }
  });
  </code></pre>
  
  <p>My HTTPService is</p>
  
  <pre><code>app.factory('HTTPService', function ($http, $q) {
      formatCSV: function (_resultObj) {
          var result = $http({
              url: "localhost:8085/api/TAdmin/UploadCSVData",
              method: 'POST',
              data: _resultObj,
              headers: {
                  "Content-Type": undefined
              },
          }).success(function (response) {
              return {
                  errorCode: 0,
                  errorString: "",
                  result: response
              }
          }).error(function (error) {
              return {
                  errorCode: 100,
                  errorString: "",
                  result: error
              }
          });
          return result;
      }
  });
  </code></pre>
  
  <p>My WebAPI C# Code is</p>
  
  <pre><code>    [HttpPost]
      public HttpResponseMessage UploadCSVData(object csv)
      {
  
          // Check if the request contains multipart/form-data.
          if (!Request.Content.IsMimeMultipartContent())
          {
              throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);
          }
  
          string root = HttpContext.Current.Server.MapPath("~/App_Data");
          var provider = new MultipartFormDataStreamProvider(root);
  
          try
          {
              BinaryFormatter bf = new BinaryFormatter();
              using (var ms = new MemoryStream())
              {
                  bf.Serialize(ms, csv);
                  var x = ms.ToArray();
              }
  
              return Request.CreateResponse(HttpStatusCode.OK);
          }
          catch (System.Exception e)
          {
              return Request.CreateErrorResponse(HttpStatusCode.InternalServerError, e);
          }
      }
  </code></pre>