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.)

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.)

• javascript
• ruby-on-rails
• file-upload
• carrierwave
• simple-form

• Can you post your application.js and application.css files? – R Milushev Commented Mar 24, 2013 at 23:35
• Yeah sorry didn't mention that. I have the entirety of the file "bootstrap-fileupload.css" copy-pasted into my already existing "bootstrap.css" file, at the bottom; same for "bootstrap-fileupload.js" into "bootstrap.js". – rmatena Commented Mar 24, 2013 at 23:49
• Does the styles work properly this way? As I can see on your screenshot , there is no file field currently (if I've understood correctly). – R Milushev Commented Mar 24, 2013 at 23:52
• It currently works like the first example here. So: when I click "Select file", a file select pops up and I can choose a file on my puter. Then, the file name is displayed in the field on the left. However, upon submitting the form, the image hasn't actually been stored in my database. I should clarify though: a 'picture' is being saved in my pictures table in the database, but there's no image attribute saved: screenshot – rmatena Commented Mar 24, 2013 at 23:59
• Now I see the problem... – R Milushev Commented Mar 25, 2013 at 0:08

3 Answers 3

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.

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.

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.