customize file_field button ruby on rails

Question

I'm trying to get rid of the ugly button rails has as default for the file upload. i want to add a glyphicon

  <%= f.file_field :image_url, class:"glyphicon glyphicon-camera" %>

This didn't work and I have tried other things in different post i saw on this page, but they don't attach the file.

Answer 1

You can do it using css.

HTML:

<div class="image-upload">
   <label for="file-input">
     <span class="glyphicon glyphicon-camera"></span>
   </label>

   <%= f.file_field :image_url, id:"file-input" %>
</div>

CSS:

.image-upload > input
{
   display: none;
}
.image-upload > label{
  cursor:pointer;
}

You can find the working example here

Answer 2

As suggested here Bootstrap Filestyle, you can use Bootstrap's Filestyle to style your file upload buttons.

Step-1: Add this to your layout application.html.erb

I have added the Bootstrap Filestyle library from CDN. You should make sure that you have both JQuery and Boostrap loaded.

<script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.filestyle/1.1.0/js/bootstrap-filestyle.min.js"> </script>

Step-2: Add this to the corresponding js file:

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

Step-3: Then your image_url file field could look like as follows:

<%= f.file_field :image_url,class: "filestyle", "data-input" => false %>