title: How to send uploaded file(s) via HttpPostedFileBase along with a ViewModel?
body: <p>I have a huge data object within which should map to a view model through controller parameter. I also have a list of files (photos) that i need to capture within an array in the aforementioned data object.</p>
  <p>My Model:</p>
  <pre><code>public class TestPerson
  {
      public int Id { get; set; }
      public string Name { get; set; }
      public string Place { get; set; }
      public int Age { get; set; }
      public byte[] File { get; set; }
  
      //[FileSize(10240)]
      //[FileTypes(&quot;jpg,jpeg,png&quot;)]
      //public HttpPostedFileBase File { get; set; }
  }
  </code></pre>
  <p>My Controller Method:</p>
  <pre><code>    public void SavePersonData(HttpPostedFileBase personPhoto, TestPerson person)
      {
  
          var dataObject = Request.Form[&quot;person&quot;];
          var serializer = new JavaScriptSerializer();
          TestPerson personReport = serializer.DeserializeObject(dataObject, typeOf(TestPerson));
  
          System.Console.WriteLine(&quot;dummy line&quot;);
      }
  </code></pre>
  <p>My .cshtml page:</p>
  <pre><code>&lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js&quot;&gt;&lt;/script&gt;
  
  &lt;div id=&quot;testKo&quot;&gt;
      Name: &lt;input type=&quot;text&quot; data-bind=&quot;value: Name&quot;/&gt;
      Place: &lt;input type=&quot;text&quot; data-bind=&quot;value: Place&quot; /&gt;&lt;br /&gt;
      Age: &lt;input type=&quot;text&quot; data-bind=&quot;value: Age&quot; /&gt;&lt;br /&gt;
  
      &lt;input type=&quot;button&quot; id=&quot;submitForm&quot; class=&quot;btn-lg&quot; value=&quot;Submit&quot; /&gt;
  &lt;/div&gt;
  
  &lt;form id=&quot;photoForm&quot; method=&quot;post&quot; enctype=&quot;multipart/form-data&quot;&gt;
      &lt;input type=&quot;hidden&quot; id=&quot;personId&quot; name=&quot;person&quot; /&gt;
      &lt;input type=&quot;file&quot; id=&quot;personPhotoId&quot; name=&quot;personPhoto&quot; /&gt;
  &lt;/form&gt;
  
  &lt;script&gt;
      $(document).ready(function () {
  
          $(document).ready(function () {
  
              var element = document.getElementById(&quot;testKo&quot;);
              ko.applyBindings(viewModel, element);
  
              $(&quot;#submitForm&quot;).on(&quot;click&quot;, function () {
  
                  var vmData = ko.toJSON(viewModel);
                  //$(&quot;#personId&quot;).val({ person: vmData });
                  var formData = new FormData($(&quot;#photoForm&quot;)[0]);
  
                  formData.append(&quot;person&quot;, vmData, &quot;person&quot;);
  
                  //var data = new FormData();
                  //data.append(&quot;vmData&quot;, vmData);
                  //data.append(&quot;photo&quot;, $(&quot;#personPhoto&quot;).get(0).files[0])
  
                  $.ajax({
                      type: &quot;POST&quot;,
                      url: '@Url.Action(&quot;SavePersonData&quot;, &quot;Home&quot;)',
                      //cache: false,
                      //async: false,
                      contentType: false,
                      processData: false,
                      enctype: &quot;multipart/form-data&quot;,
                      dataType: &quot;json&quot;,
                      //data: {
                      //    testPerson: vmData
                      //},
                      //data: {
                      //    personPhoto: formData,
                      //    person: vmData
                      //},
                      data: formData,
                      success: function (data) {
                          alert(&quot;success!&quot;);
                      }
                  });
              });
          });
  
          function generatedViewModel() {
              var self = this;
  
              self.Id = ko.observable(&quot;1&quot;);
              self.Name = ko.observable();
              self.Place = ko.observable();
              self.Age = ko.observable();
              self.File = ko.observable();
          }
          var viewModel = new generatedViewModel();
  
      });
  &lt;/script&gt;
  </code></pre>
  <p>Is there any way i can receive both the parameters in my controller action method with this code? Or do i need to tweak it in any way? I just need to send all the content including file / image upload data and non-form data object to my controller method.</p>