title: jQuery File Upload - upload file on form submit
body: <p>I have a form with Jquery File Upload. The form is:</p>
  
  <pre><code>&lt;form action="" method="post" name="job_offer_reply" id="job_offer_reply" enctype="multipart/form-data"&gt;
      &lt;textarea name="description" id="description" class="form-control" rows="3"&gt;&lt;/textarea&gt;
      &lt;div id="drop"&gt;
          &lt;?php _e('Drop You CV Here', 'ja'); ?&gt;
          &lt;a&gt;&lt;?php _e('OR Browse', 'ja'); ?&gt;&lt;/a&gt;
          &lt;input type="file" name="upl" multiple/&gt;
      &lt;/div&gt;    
      &lt;input id="submit" type="submit" class="btn btn-primary" name="submit" value="Submit"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>The File Upload init function (shortened) is:</p>
  
  <pre><code>$(function(){
      $('#drop a').click(function(){
          // Simulate a click on the file input button
          // to show the file browser dialog
          $(this).parent().find('input').click();
      });
  
  
      // Initialize the jQuery File Upload plugin
      $('#job_offer_reply').fileupload({
  
          formData: {
              action: 'ja_upload_cv',
          },
          dropZone: $('#drop'),
          add: function (e, data) {
  
              // Automatically upload the file once it is added to the queue
              var jqXHR = data.submit();
          },
  
          done:function(e, data){
              console.log(data);
          },
          fail:function(e, data){
              // Something has gone wrong!
              data.context.addClass('error');
          }
  
      });
  });
  </code></pre>
  
  <p>This code uploads the file as soon as it is selected/dropped. When I remove the </p>
  
  <pre><code>var jqXHR = data.submit();
  </code></pre>
  
  <p>it isn't submitted at all, even after the form submit. </p>
  
  <p>How can I upload the file (have it in my $_FILES array) when the submit button is clicked?</p>