如何在Rails simple_form中实现Jasny的bootstrap文件上传样式扩展？

Question

我想使用Jasny's Twitter Bootstrap extension为我的Rails simple_form图片上传字段设置样式。我已经（成功）使用CarrierWave上传图片。

目前，我的表单有效，代码看起来像这样（我已经删除了一些html，一些表单字段并设计了错误消息代码）以便清晰：

<%= simple_form_for(resource, :as => resource_name, :url => registration_path(resource_name), :html => {class: "form-horizontal", :method => :put }) do |f| %>

  <%= f.input :username, :label => "username" %>

  <%= f.simple_fields_for :picture do |pic| %>
    <%= pic.input :image, :as => :file, :label => "upload a photo" %>
  <% end %>

  <%= f.input :current_password, :label => "enter password to confirm update(s)" %>
  <%= f.button :submit, "Update", class: "btn btn-success" %>

<% end %>

“simple_fields_for：picture”部分产生以下HTML：

<div class="control-group file optional">
  <label class="file optional control-label" for="user_picture_attributes_image">
    upload a photo
  </label>
  <div class="controls">
    <input class="file optional" id="user_picture_attributes_image" name="user[picture_attributes][image]" type="file">
  </div>
</div>

要使用Jasny代码，我想也许我可以用他们的文档中的代码替换“simple_fields_for：picture”部分，除了 - 非常无望的尝试 - 我已经手动将其添加到input-tag： id =“user_picture_attributes_image”name =“user [picture_attributes] [image]”

<div class="fileupload fileupload-new" data-provides="fileupload">
  <div class="input-append">
    <div class="uneditable-input span3">
      <i class="icon-file fileupload-exists"></i>
      <span class="fileupload-preview"></span>
    </div>
    <span class="btn btn-file">
      <span class="fileupload-new">Select file</span>
      <span class="fileupload-exists">Change</span>
      <input type="file" id="user_picture_attributes_image" name="user[picture_attributes][image]"/>
    </span>
    <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
  </div>
</div>

它不起作用（duh：D）。我不够熟练，无法深入了解Jasny的bootstrap-fileupload.js中的javascript部分，也没有使用simple_form，因此我不知道是否可以在其中更改某些内容以使其正常工作。一些谷歌搜索告诉我有人创建了扩展名rails-jasny-bootstrap-extension，但遗憾的是除了原始的css和js之外还没有其他代码。 在这里画空白很难。

对于上下文：此处的资源是User。我的user.rb看起来像这样（相关代码）：

class User < ActiveRecord::Base
  has_one :picture, as: :attachable, :dependent => :destroy
  accepts_nested_attributes_for :picture
end

我的图片模型看起来像这样：

class Picture < ActiveRecord::Base
  attr_accessible :image, :remote_image_url, :remove_image, :thumb_width, :thumb_height
  attr_accessible :attachable_id, :attachable_type
  belongs_to :attachable, polymorphic: true
  mount_uploader :image, ImageUploader
end

所需差异的屏幕截图，可视化（忽略样式）：

Link to Jasny's bootstrap-fileupload.zip 提前谢谢你看看，对不起文字的墙;如果我需要添加任何其他信息，请与我们联系。

（PS：如果有人知道一个简单的替代方案，也会受到赞赏。）

Answer 1

您可以尝试使用file.field而不是输入。

自：

<%= f.simple_fields_for :picture do |pic| %>
  <%= pic.input :image, :as => :file, :label => "upload a photo" %>
<% end %>

要：

<%= f.simple_fields_for :picture do |pic| %>
  <%= pic.file_field :image %>
<% end %>

这不会从simple_form添加花哨的表单助手。

Answer 2

试试这个：

 <%= f.simple_fields_for :picture do |pic| %>

  <div class="fileupload fileupload-new" data-provides="fileupload">
  <div class="input-append">
  <div class="uneditable-input span3">
   <i class="icon-file fileupload-exists"></i> 
<span class="fileupload-preview"></span></div>
<span class="btn btn-file"><span class="fileupload-new">Select file</span>
<span class="fileupload-exists">Change</span>
<%= pic.input :image, :as => :file, :label => "upload a photo" %>
</span>
<a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
 </div>
 </div>

 <% end %>

只需将erb插入bootstrap的html。

Answer 3

如果您还没有找到合适的解决方案，请点击此处：

<%= f.input :picture, :label => 'Upload Picture' do %>
<div class="fileupload fileupload-new" data-provides="fileupload">
  <div class="input-append">
    <div class="uneditable-input span3">
      <i class="icon-file fileupload-exists"></i>
      <span class="fileupload-preview"></span>
    </div>
    <span class="btn btn-file">
      <span class="fileupload-new">Select file</span>
      <span class="fileupload-exists">Change</span>
      <%= f.file_field :picture %>
    </span>
    <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
  </div>
</div>
<% end %>

这应与其他表单字段完美对齐。