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:
<%= 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 %>
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;
}