How to implement Jasny's bootstrap file-upload styling extension in Rails simple_form?

Question

I want to style my Rails simple_form image upload field using Jasny's Twitter Bootstrap extension . I've already (successfully) been using CarrierWave to upload images.

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:

<%= simple_form_for(resource, :as => resource_name, :url => registration_path(resource_name), :html => {class: "form-horizontal", :method => :put }) do |f| %>

  <%= f.input :username, :label => "username" %>

  <%= f.simple_fields_for :picture do |pic| %>
    <%= pic.input :image, :as => :file, :label => "upload a photo" %>
  <% end %>

  <%= f.input :current_password, :label => "enter password to confirm update(s)" %>
  <%= f.button :submit, "Update", class: "btn btn-success" %>

<% end %>

The "simple_fields_for :picture" part yields the following HTML:

<div class="control-group file optional">
  <label class="file optional control-label" for="user_picture_attributes_image">
    upload a photo
  </label>
  <div class="controls">
    <input class="file optional" id="user_picture_attributes_image" name="user[picture_attributes][image]" type="file">
  </div>
</div>

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]"

<div class="fileupload fileupload-new" data-provides="fileupload">
  <div class="input-append">
    <div class="uneditable-input span3">
      <i class="icon-file fileupload-exists"></i>
      <span class="fileupload-preview"></span>
    </div>
    <span class="btn btn-file">
      <span class="fileupload-new">Select file</span>
      <span class="fileupload-exists">Change</span>
      <input type="file" id="user_picture_attributes_image" name="user[picture_attributes][image]"/>
    </span>
    <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
  </div>
</div>

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 rails-jasny-bootstrap-extension , but sadly there's no code in it yet aside from the original css and js. Drawing blank pretty hard here.

For context: the resource here is User. My user.rb looks like this (relevant code):

class User < ActiveRecord::Base
  has_one :picture, as: :attachable, :dependent => :destroy
  accepts_nested_attributes_for :picture
end

And my picture model looks like this:

class Picture < 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

Screenshot of the desired difference, visually (ignore the styling):

Link to Jasny's bootstrap-fileupload.zip 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.

(PS.: if someone knows an easy alternative, that would also be appreciated.)

Answer 1

You can try using the file.field instead of input.

From:

<%= f.simple_fields_for :picture do |pic| %>
  <%= pic.input :image, :as => :file, :label => "upload a photo" %>
<% end %>

To:

<%= f.simple_fields_for :picture do |pic| %>
  <%= pic.file_field :image %>
<% end %>

This won't add the fancy form helpers from simple_form.

Answer 2

Try this :

 <%= f.simple_fields_for :picture do |pic| %>

  <div class="fileupload fileupload-new" data-provides="fileupload">
  <div class="input-append">
  <div class="uneditable-input span3">
   <i class="icon-file fileupload-exists"></i> 
<span class="fileupload-preview"></span></div>
<span class="btn btn-file"><span class="fileupload-new">Select file</span>
<span class="fileupload-exists">Change</span>
<%= pic.input :image, :as => :file, :label => "upload a photo" %>
</span>
<a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
 </div>
 </div>

 <% end %>

Just insert erb into bootstrap's html.

Answer 3

In case you haven't found a proper solution yet, here it is:

<%= f.input :picture, :label => 'Upload Picture' do %>
<div class="fileupload fileupload-new" data-provides="fileupload">
  <div class="input-append">
    <div class="uneditable-input span3">
      <i class="icon-file fileupload-exists"></i>
      <span class="fileupload-preview"></span>
    </div>
    <span class="btn btn-file">
      <span class="fileupload-new">Select file</span>
      <span class="fileupload-exists">Change</span>
      <%= f.file_field :picture %>
    </span>
    <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
  </div>
</div>
<% end %>

This should align perfectly with rest of your form fields.