title: Jasny's bootstrap file upload plugin - how do I handle file?
body: <p>I'm trying to use <a href="http://jasny.github.io/bootstrap/javascript.html#fileupload" rel="nofollow">Jasny's file upload plugin</a>. The plugin appears to be working fine except I am unable to access the actual file so it can be placed into the correct directory. The only thing I ever see is the blob getting set as the thumbnail from inside the console, but no way to access it. Here is what I have so far:</p>
  
  <pre><code>[HTML]:
  &lt;form action="#" class="member_settings" id="member_settings" enctype="multipart/form-data"&gt;
      &lt;input type="text" name="member_name" class="span12 m-wrap" value="{{ @user_info.member_name }}" placeholder="Company Name" rel="tooltip" title="" data-placement="bottom" data-original-title="Company Name" &gt;
      &lt;input type="text" name="member_email" class="span12 m-wrap" value="{{ @user_info.member_email }}" placeholder="Email Address" rel="tooltip" title="" data-placement="bottom" data-original-title="Email Address"&gt;       
      &lt;div class="fileupload fileupload-new" data-provides="fileupload"&gt;
          &lt;div class="fileupload-new thumbnail" &gt;
             &lt;img src="{{ @avatar }}" alt="" /&gt;
          &lt;/div&gt;
          &lt;div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 150px; max-height: 150px; line-height: 20px;"&gt;&lt;/div&gt;
          &lt;div class="span12"&gt;
             &lt;span class="btn btn-file"&gt;&lt;span class="fileupload-new"&gt;Select New Image&lt;/span&gt;
             &lt;span class="fileupload-exists"&gt;Change&lt;/span&gt;
             &lt;input type="file" id="file" name="file" class="default" /&gt;&lt;/span&gt;
             &lt;a href="#" class="btn fileupload-exists" data-dismiss="fileupload"&gt;Remove&lt;/a&gt;
          &lt;/div&gt;
       &lt;/div&gt;
       &lt;div id="update_user_settings" class="btn green pull-right" style="margin:2px;"&gt;&lt;i class="icon-check"&gt;&lt;/i&gt; Update Profile&lt;/div&gt;    
  &lt;/form&gt;
  
  [JS]:
  &lt;script&gt;
  $('#update_user_settings').click(function() {
      $('.fileupload').fileupload({
          url: '/api/upload/profile_img/{{ @SESSION.portal_id }}'
      }); 
      var post_url = "/api/update/user/details";
      $.ajax({
          type: "POST",
          url: post_url,
          data: $('#member_settings').serialize(),    
          dataType: "html"    
      }); 
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>My problem is that nothing is getting sent to the url. I don't see anything in the console when I submit.</p>
  
  <p>The only tutorials I've seen use the entire fileuploader inside of a form, but what I'm trying to do is allow the user to make all desired changes and then apply them.</p>
  
  <p>Is there something I'm missing?</p>