RoR "file_field" and Twitter bootstrap

Question

I am trying to customize this part of code in my Rails3 application

<%= f.submit "Create my account", :class => "btn btn-small btn-primary btn-inverse" %>
<%= f.file_field :photo %>

into this:

<%= f.submit "Create my account", :class => "btn btn-small btn-primary btn-inverse" %>
<%= f.file_field :photo, :class => "btn btn-small btn-primary btn-inverse" %>

but the file_field doesnt not seem to respond to customization.

Can somebody help me in this one?

Check my answer here: http://stackoverflow.com/a/13731666/316700 — fguillen, Mar 03 '13 at 17:54

duhaime · Answer 1 · 2016-12-28T20:09:47.107

3

I used mindriot's suggestion, but needed to add one comma after the inline onchange js and couldn't edit his answer as one-character edits are not allowed:

<div class="input-group">
  <span class="input-group-btn">
    <span class="btn btn-small btn-primary btn-inverse" onclick="$(this).parent().find('input[type=file]').click();">Browse</span>
    <%= f.file_field :file_upload, onchange: "$(this).parent().parent().find('.form-control').html($(this).val().split(/[\\\\|/]/).pop());", style: "display: none;" %>
  </span>
  <span class="form-control"></span>
</div>

edited Dec 28 '16 at 20:09

answered Apr 03 '16 at 20:56

duhaime

25,611
17
169
224

It saved a lot of time :) will edit js function for multiple files upload – ray Jan 10 '21 at 18:45

score 0 · Answer 2 · answered Jun 15 '12 at 16:25

0

the class are applied to the input and not the button

http://jsfiddle.net/baptme/k3KtH/

If you want to style the button you can use the method described here : http://www.quirksmode.org/dom/inputfile.html

answered Jun 15 '12 at 16:25

baptme

10,062
3
52
57

score 0 · Answer 3 · edited May 23 '17 at 12:10

0

<div class="input-group">
  <span class="input-group-btn">
    <span class="btn btn-small btn-primary btn-inverse" onclick="$(this).parent().find('input[type=file]').click();">Browse</span>
    <%= f.file_field :photo, onchange: "$(this).parent().parent().find('.form-control').html($(this).val().split(/[\\\\|/]/).pop());" style: "display: none;" %>
  </span>
  <span class="form-control"></span>
</div>

Based on this answer.

edited May 23 '17 at 12:10

Community

1
1

answered May 27 '15 at 17:45

mindriot

14,149
4
29
40

Missing comma on this response Mindriot. `" style: "display: none;" %>` should be `", style: "display: none;" %>` – Rene Chan Oct 07 '18 at 07:22

RoR "file_field" and Twitter bootstrap

3 Answers3