ruby-on-railsglyphiconstwitter-bootstrap-rails

Using bootstrap glyphicon in rails simple form attachment


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 %>

Solution

  • 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;
    }