title: How to implement Jasny's bootstrap file-upload styling extension in Rails simple_form?
body: <p>I want to style my Rails simple_form image upload field using <a href="http://jasny.github.com/bootstrap/javascript.html#fileupload" rel="nofollow noreferrer">Jasny's Twitter Bootstrap extension</a>. I've already (successfully) been using CarrierWave to upload images.</p>
  
  <p>Currently, my form works, and the code looks like this (I've taken away some html, some form fields and devise error messages code) for clarity:</p>
  
  <pre><code>&lt;%= simple_form_for(resource, :as =&gt; resource_name, :url =&gt; registration_path(resource_name), :html =&gt; {class: "form-horizontal", :method =&gt; :put }) do |f| %&gt;
  
    &lt;%= f.input :username, :label =&gt; "username" %&gt;
  
    &lt;%= f.simple_fields_for :picture do |pic| %&gt;
      &lt;%= pic.input :image, :as =&gt; :file, :label =&gt; "upload a photo" %&gt;
    &lt;% end %&gt;
  
    &lt;%= f.input :current_password, :label =&gt; "enter password to confirm update(s)" %&gt;
    &lt;%= f.button :submit, "Update", class: "btn btn-success" %&gt;
  
  &lt;% end %&gt;
  </code></pre>
  
  <p>The "simple_fields_for :picture" part yields the following HTML:</p>
  
  <pre><code>&lt;div class="control-group file optional"&gt;
    &lt;label class="file optional control-label" for="user_picture_attributes_image"&gt;
      upload a photo
    &lt;/label&gt;
    &lt;div class="controls"&gt;
      &lt;input class="file optional" id="user_picture_attributes_image" name="user[picture_attributes][image]" type="file"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>To use the Jasny code, I thought perhaps I could replace the "simple_fields_for :picture" part with the code from their documentation, except that ―in quite a hopeless attempt― I've manually added this to the input-tag: id="user_picture_attributes_image" name="user[picture_attributes][image]"</p>
  
  <pre><code>&lt;div class="fileupload fileupload-new" data-provides="fileupload"&gt;
    &lt;div class="input-append"&gt;
      &lt;div class="uneditable-input span3"&gt;
        &lt;i class="icon-file fileupload-exists"&gt;&lt;/i&gt;
        &lt;span class="fileupload-preview"&gt;&lt;/span&gt;
      &lt;/div&gt;
      &lt;span class="btn btn-file"&gt;
        &lt;span class="fileupload-new"&gt;Select file&lt;/span&gt;
        &lt;span class="fileupload-exists"&gt;Change&lt;/span&gt;
        &lt;input type="file" id="user_picture_attributes_image" name="user[picture_attributes][image]"/&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;
  </code></pre>
  
  <p>It doesn't work (duh :D). I am not skilled enough to deeply understand what is going on with the javascript part in Jasny's bootstrap-fileupload.js, nor under the hood with simple_form, so I don't know if I could change something in there to make it work. Some googling tells me someone's created the extension <a href="https://github.com/developertown/rails-jasny-bootstrap-extension" rel="nofollow noreferrer">rails-jasny-bootstrap-extension</a>, but sadly there's no code in it yet aside from the original css and js.
  Drawing blank pretty hard here.</p>
  
  <p>For context: the resource here is User. My user.rb looks like this (relevant code):</p>
  
  <pre><code>class User &lt; ActiveRecord::Base
    has_one :picture, as: :attachable, :dependent =&gt; :destroy
    accepts_nested_attributes_for :picture
  end
  </code></pre>
  
  <p>And my picture model looks like this:</p>
  
  <pre><code>class Picture &lt; ActiveRecord::Base
    attr_accessible :image, :remote_image_url, :remove_image, :thumb_width, :thumb_height
    attr_accessible :attachable_id, :attachable_type
    belongs_to :attachable, polymorphic: true
    mount_uploader :image, ImageUploader
  end
  </code></pre>
  
  <p>Screenshot of the desired difference, visually (ignore the styling): </p>
  
  <p><img src="https://monosnap.com/image/uiixHbYGmlNOifMMe6fvICjcp.png" alt="screenshot"></p>
  
  <p><a href="http://bootstrap-server.jasny.net/bootstrap-fileupload.zip" rel="nofollow noreferrer">Link to Jasny's bootstrap-fileupload.zip</a>
  Thanks in advance for taking a look, and sorry for the wall of text; let me know if I need to add any other information.</p>
  
  <p>(PS.: if someone knows an easy alternative, that would also be appreciated.)</p>