1

Hi all I use simple form. I have a model which contains attachment. Everything works fine except for I get a browse button in browser as shown in below image. Instead of Browse button I want bootstrap attachment glyphicon. How can I achieve this?. My code is below this image:

enter image description here

<%= simple_form_for Status.new do |f| %>
  <%= f.input :status, as: :text, required: true, autofocus: true %>
  <%= f.input :statachment, as: :file, label: 'Attach here' %>
  <%= f.submit "Post", class: 'btn btn-primary' %>
<% end %>
Aditya Y
  • 198
  • 3
  • 13

1 Answers1

0

You can try the following ways

http://markusslima.github.io/bootstrap-filestyle/

just need to add

<script type="text/javascript" src="js/bootstrap-filestyle.min.js"> </script>

Then

$(":file").filestyle({input: false});

or

 <%= f.input :statachment, as: :file, label: 'Attach here', class: "filestyle", data-input: "false" %>

Or using another way

http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/

In Views

<span class="btn btn-default btn-file">
    Browse <%= f.input :statachment, as: :file, label: 'Attach here' %>
</span>

and in css

  .btn-file {
    position: relative;
    overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}
Rajarshi Das
  • 11,778
  • 6
  • 46
  • 74