title: Knockout + Blueimp Fie upload
body: <p>I'm trying to marry my knockout VM into Blueimp File Upload using ASP.NET MVC.</p>
  
  <p>What i'm trying to achieve is: </p>
  
  <ul>
  <li>bind form data with KO view model</li>
  <li>upload a file along with the form data, on button click</li>
  <li>in teh action, receive the form data as parameters, and access the file data in any possible way</li>
  <li>It would also be desirable to upload multiple files</li>
  </ul>
  
  <p>The sequence is as follows:  </p>
  
  <p>This is why I have so far:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;form action="/Test/Post" method="post" enctype="multipart/form-data"&gt;
  &lt;div&gt;
      &lt;label for="Id" &gt;Id&lt;/label&gt;
      &lt;input data-bind="value: Id" class="text-box single-line" 
         data-val="true" data-val-number="The field Id must be a number."
         data-val-required="The Id field is required." id="Id" 
         name="Id" type="number" value="" /&gt;
  &lt;/div&gt;
  &lt;div&gt;
      &lt;label  for="ImageUpload"&gt;Image Upload&lt;/label&gt;
      &lt;input id="ImageUpload" name="ImageUpload" type="file" value="" /&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  &lt;button type="submit" data-bind="click: upload"&gt;Create&lt;/button&gt;
  &lt;script&gt;
      $(document).ready(function() {
          ko.applyBindings(new myVm({Id: 0, Something: 0}));
      });
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>FileUpload Init</strong></p>
  
  <pre><code>$('input:file').fileupload({
      dataType: 'json',
      autoUpload: false, // do not auto upload on file select
  });
  </code></pre>
  
  <p><strong>KO Script</strong></p>
  
  <pre><code>function myVm(data) {
      var self = this;
  
      // Write mapping config
      var mappingConfig = {};
  
      // Perform mapping
      ko.mapping.fromJS(data, mappingConfig, self);
  
      // Upload
      self.upload = function () {
          $('#ImageUpload').bind('fileuploadsubmit', function (e, data) {
              // Bind JS form
              data.formData = ko.mapping.toJS(self);
          });
  
          // this doesn't trigger the binding to fileuploadsubmit
          $('form').submit();
      };
  };
  </code></pre>