customize file_field button ruby on rails - 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 %>

Answer 3

you can use also:-
add file field and hide this field :-
<%= f.file_field :image_url ,:onchange=>"loadFile(event)",id: "upload-it", class: "hide_input"%>
add one div with class:"glyphicon glyphicon-camera" :-
<div class="glyphicon glyphicon-camera" id="image-output",:onclick="upload_it(event)"></div>
use script:-
<script>
var loadFile = function(event) {
var output = document.getElementById('image-output');
output.src = URL.createObjectURL(event.target.files[0]);
};
function upload_it(){
$("#upload-it").click();
};
</script>