Изменение настроек по умолчанию «выбрать файл» rails

Question

Я хотел бы изменить кнопку «выбрать файл» по умолчанию в моем приложении Rails. Я использую Bootstrap и хотел бы заменить кнопку одним из Bootstrap Glyphicons.

Вот div из classform-group, который контролирует кнопку

<div class="form-group"> 
    <%= f.label :image %><br> 
    <%= f.file_field :image, class: "form-control" %> 
</div> 

Answer 1

HTML

Что-то вы должны знать, что это не Rails вопрос - что это HTML один. Хотя это возможно, это больше хака, чем реальной настройки

Хорошим примером является a demo we made here (вы должны зарегистрироваться & нажмите на кнопку «Профиль» в правом верхнем углу):

Настройка кнопки file input не на самом деле жизнеспособный, как вы хотите - вы в принципе нужно скрыть кнопку & заменить его собственный элемент, который затем может быть связан с событием JS.

-

Методы

Паван размещены в комментариях эпический JSFiddle - реквизит к нему !!

Мы использовали jquery-file-upload для нашей кнопки - в основном, мы можем одновременно выбрать файл &. Поистине удивительно:

#app/views/your_controller/view.html.erb 
<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> 

#app/assets/javascripts/application.js -> allows to upload directly (no submit) 
$('#avatar').fileupload({ 

    url: '/profile/' + $(this).attr('data_id'), 
    dataType: 'json', 
    type: 'post', 

    add: function (e, data) { 
     //$(".items .avatar .avatar").prepend('<div class="loading" id="avatar_loading"><img src="<%= asset_path("profile/avatar_loading.gif") %>"></div>'); 
     //$('#avatar_loading').fadeIn('100'); 
     $(this).avatar_loading('avatar_loading'); 
     data.submit(); 
    }, 
    success: function (data, status) {; 
     $("#avatar_img").fadeOut('fast', function() { 
      $(this).attr("src", data.avatar_url).fadeIn('fast', function(){ 
       $(this).avatar_loading('avatar_loading'); 
      }); 
     }); 
    } 

}); 

Answer 2

RoR не file_field очень настраиваемый "выбрать файл". Вы должны использовать некоторую «магию».

Этот article решит вашу проблему. Но вы также можете использовать простой стиль html.

<input type="file" class="btn btn-small btn-primary btn-inverse" /> 

или

<input type="file" class="input-file" />