title: Sending Multi part form and JSON data from Angular JS to MVC
body: <p>I have a upload file control that uploads the file data to a MVC Controller . I also want to send additional upload details model object in the same request.</p>
  
  <p>But for file - upload the request content-type <strong>undefined</strong> works for me. But for the MVC controller to effectively receive the model data it has to be <strong>application/json.</strong> How would I do that in a single request ? </p>
  
  <p>Or, is there any other approach I can follow ? Please suggest. For the upload to complete I need both the data to be sent to the server.</p>
  
  <p>I am doing is </p>
  
  <pre><code>var formdata;
  $scope.getTheFiles = function ($files) {
      formdata = new FormData();
      angular.forEach($files, function (value, key) {
          formdata.append(key, value);
      });
  </code></pre>
  
  <p>and </p>
  
  <pre><code>$scope.validateFiles = function () {
  
      var params = UploadDataServices.getGroupMembershipUploadParams();
  
      $scope.pleaseWait = { "display": "block" };
  
      var request = {
          method: 'POST',
          url: BasePath + 'uploadNative/ValidateFiles/',
          data: formdata,
          headers: {
              'Content-Type': undefined
          }
      };
  
      // SEND THE FILES.
      console.log(formdata);
  
      if (formdata != null || formdata != undefined) {
          $http(request)
  </code></pre>
  
  <p>And in the MVC controller I get the File Data as </p>
  
  <pre><code>System.Web.HttpFileCollection hfc = System.Web.HttpContext.Current.Request.Files;
  </code></pre>
  
  <p>Now I want to send that <strong>params</strong> also in the request which I got via </p>
  
  <pre><code>var params = UploadDataServices.getGroupMembershipUploadParams();
  </code></pre>
  
  <p>How would I do that ? I tried doing</p>
  
  <pre><code>    var request = {
          method: 'POST',
          url: BasePath + 'uploadNative/ValidateFiles/',
          data: {formdata:formdata,arg:params},
          headers: {
              'Content-Type': undefined
          }
      };
  </code></pre>
  
  <p>But I could not access the File Data . </p>
  
  <p>Please suggest a way .</p>
  
  <p>Thanks in advance.</p>