title: RoR: jquery file upload on submit form button
body: <p>How do I make it so my submit button will upload the images?</p>
  
  <pre><code>&lt;%= simple_form_for @project, html: { multipart: true, id: 'fileupload' } do |f| %&gt;
  
    &lt;span class="btn btn-success fileinput-button"&gt;
      &lt;i class="glyphicon glyphicon-plus"&gt;&lt;/i&gt;
      &lt;span&gt;Add files...&lt;/span&gt;
      &lt;input type="file" name="photos[]" id='photo_upload_btn', multiple&gt;
    &lt;/span&gt;
    &lt;button type="submit" class="btn btn-primary start"&gt;
      &lt;i class="glyphicon glyphicon-upload"&gt;&lt;/i&gt;
      &lt;span&gt;Start upload&lt;/span&gt;
    &lt;/button&gt;
    &lt;button type="reset" class="btn btn-warning cancel"&gt;
      &lt;i class="glyphicon glyphicon-ban-circle"&gt;&lt;/i&gt;
      &lt;span&gt;Cancel upload&lt;/span&gt;
    &lt;/button&gt;
  
    &lt;%= f.button :submit, class: "btn btn-primary pull-right" %&gt;
  &lt;% end %&gt;
  
  
  &lt;script&gt;
  $(function () {
  
  'use strict'; //not even sure what this is for
  
  $('#fileupload').fileupload({
  
  });
      // Load existing files:
      $('#fileupload').addClass('fileupload-processing');
      $.ajax({
          url: $('#fileupload').fileupload('option', 'url'),
          dataType: 'json',
          context: $('#fileupload')[0]
      }).always(function () {
          $(this).removeClass('fileupload-processing');
      }).done(function (result) {
          $(this).fileupload('option', 'done')
              .call(this, $.Event('done'), {result: result});
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Right now, when I upload an image, it'll show thumbnail preview and start button with a cancel button. I want to move the start button and have it all upload using the submit button.</p>