Rails bootstrap form file upload button not working? - ruby-on-rails

Question

I am using bootstrap 3 and rails 4. I want to remove the white input field line under Avatar and only display my file upload button!
This is what it looks like:
This is my edit.html.erb:
<div class="col-lg-5">
<div class="well bs-component">
<h2>Edit <%= resource_name.to_s.humanize %></h2>
<%= bootstrap_form_for(resource, :as => resource_name, :url => registration_path(resource_name), :html => { :method => :put, :multipart => true }) do |f| %>
<%= devise_error_messages! %>
<%= image_tag #user.avatar.url %>
<div>
<%= f.email_field :email, :autofocus => true %></div>
<% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
<div>Currently waiting confirmation for: <%= resource.unconfirmed_email %></div>
<% end %>
<div> <i>(leave blank if you don't want to change it)</i><br />
<%= f.password_field :password, :autocomplete => "off" %></div>
<div><br />
<%= f.password_field :password_confirmation %></div>
<div><i>(we need your current password to confirm your changes)</i><br />
<%= f.password_field :current_password %></div>
<%= f.label 'Add an image' %>
<%= f.file_field :avatar %>
<div><%= f.submit "Update" %></div>
<% end %>
<h3>Cancel my account</h3>
<p>Unhappy? <%= button_to "Cancel my account", registration_path(resource_name), :data => { :confirm => "Are you sure?" }, :method => :delete %></p>
<%= link_to "Back", :back %>
</div>
</div>
This is my html output:
<h2>Edit User</h2>
<form accept-charset="UTF-8" action="/users" class="edit_user" enctype="multipart/form-data" id="edit_user" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" value="✓" type="hidden"><input name="_method" value="put" type="hidden"><input name="authenticity_token" value="vpVmH4k1YDXgJxAiZtVoI872hR67COFNoo1irki8sAY=" type="hidden"></div>
<img alt="Justdoit" src="/system/users/avatars/000/000/001/original/justdoit.png?1393323443">
<div>
<div class="form-group"><label for="user_email">Email</label><input autofocus="autofocus" class="form-control" id="user_email" name="user[email]" value="ggeorgiev#live.co.uk" type="email"></div></div>
<div> <i>(leave blank if you don't want to change it)</i><br>
<div class="form-group"><label for="user_password">Password</label><input autocomplete="off" class="form-control" id="user_password" name="user[password]" type="password"></div></div>
<div><br>
<div class="form-group"><label for="user_password_confirmation">Password confirmation</label><input class="form-control" id="user_password_confirmation" name="user[password_confirmation]" type="password"></div></div>
<div><i>(we need your current password to confirm your changes)</i><br>
<div class="form-group"><label for="user_current_password">Current password</label><input class="form-control" id="user_current_password" name="user[current_password]" type="password"></div></div>
<label for="user_Add an image">Add an image</label>
<div class="form-group"><label for="user_avatar">Avatar</label><input class="form-control" id="user_avatar" name="user[avatar]" type="file"></div>
<div><input class="btn btn-default" name="commit" value="Update" type="submit"></div>
</form>
<h3>Cancel my account</h3>
<p>Unhappy? </p><form action="/users" class="button_to" method="post"><div><input name="_method" value="delete" type="hidden"><input data-confirm="Are you sure?" value="Cancel my account" type="submit"><input name="authenticity_token" value="vpVmH4k1YDXgJxAiZtVoI872hR67COFNoo1irki8sAY=" type="hidden"></div></form><p></p>
Back

Answer 1

Styling the HTML input elements is not something browsers support currently input type=file show only button
We recently used jquery-file-upload to style this type of button (site):
This basically works by replacing the default button with a simple CSS-based one. The code we used is here:
.items .avatar {
display: inline-block;
position: relative;
background: #000;
width: 260px;
}
.items .avatar .avatar img { display: block; }
.items .avatar .avatar { position: relative; }
.items .avatar .avatar:after {
transition: opacity 0.25s ease;
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 160px 0 0 107px;
content: url('profile/new_avatar.png');
background: url('profile/photo_delete_bg.png');
opacity: 0;
z-index: 2;
}
.items .avatar .avatar input { z-index: 999; height: 100%;}
.items .avatar .avatar:hover:after { opacity: 0.8; }
.items .avatar .avatar:active:after { opacity: 0.6; }
<div class="items">
<div class="avatar">
<!-- New Avatar Upload Form -->
<%= form_for :upload, :html => {:multipart => true, :id => "avatar"}, :method => :put, url: profile_path(current_user.id), "data_id" => current_user.id do |f| %>
<div class="btn btn-success fileinput-button avatar" id="avatar_container">
<%= f.file_field :avatar, :title => "Upload New" %>
<%= image_tag(#user.profile.avatar.url, :width=> '100%', :id => "avatar_img", :alt => name?(#user)) %>
</div>
<% end %>
<div class="name"><%= link_to name?(#user), root_path %></div>
</div>
There is a much better setup on this question (I copied directly from it for you):
You can try a working example here: http://jsfiddle.net/VQJ9V/307/
(Tested in FF 7, IE 9, Safari 5, Opera 11 and Chrome 14)
It works by creating a big file input (with font-size:50px), then
wrapping it in a div that has a fixed size and overflow:hidden. The
input is then only visible through this "window" div. The div can be
given a background image or color, text can be added, and the input
can be made transparent to reveal the div background:
HTML:
<div class="inputWrapper">
<input class="fileInput" type="file" name="file1"/> </div> CSS:
.inputWrapper {
height: 32px;
width: 64px;
overflow: hidden;
position: relative;
cursor: pointer;
/*Using a background color, but you can use a background image to represent a button*/
background-color: #DDF; } .fileInput {
cursor: pointer;
height: 100%;
position:absolute;
top: 0;
right: 0;
z-index: 99;
/*This makes the button huge. If you want a bigger button, increase the font size*/
font-size:50px;
/*Opacity settings for all browsers*/
opacity: 0;
-moz-opacity: 0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0) }