6

JasnyのTwitterBootstrap拡張機能を使用して、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の内部で何が起こっているのかを深く理解するのに十分なスキルがないので、そこで何かを変更して機能させることができるかどうかわかりません。いくつかのグーグルは、誰かが拡張レール-jasny-bootstrap-extensionを作成したことを教えてくれますが、残念ながら、元のcssとjs以外のコードはまだありません。ここでかなりハードに空白を描画します。

コンテキストの場合:ここでのリソースはユーザーです。私の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

視覚的に(スタイリングを無視して)必要な違いのスクリーンショット:

スクリーンショット

Jasnyのbootstrap-fileupload.zipへのリンクご覧 いただきありがとうございます。テキストの壁をお詫び申し上げます。他の情報を追加する必要がある場合はお知らせください。

(追記:誰かが簡単な代替案を知っているなら、それもありがたいです。)

4

3 に答える 3

4

inputの代わりに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から派手なフォームヘルパーを追加しません。

于 2013-05-22T12:03:38.933 に答える
1

これを試して :

 <%= 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ブートストラップのhtmlに挿入するだけです。

于 2013-03-24T23:45:55.740 に答える
0

適切な解決策がまだ見つからない場合は、次のようになります。

<%= 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 %>

これは、残りのフォームフィールドと完全に一致するはずです。

于 2013-08-26T19:11:37.483 に答える