Làm cách nào để triển khai phần mở rộng kiểu tệp tải lên tệp khởi động của Jasny trong Rails simple_form?

Question

Tôi muốn tạo kiểu cho trường tải lên hình ảnh Rails simple_form của mình bằng cách sử dụng Jasny's Twitter Bootstrap extension. Tôi đã (thành công) đang sử dụng CarrierWave để tải lên hình ảnh.

Hiện nay, hình thức của tôi làm việc, và mã trông như thế này (tôi đã lấy đi một số html, một số lĩnh vực hình thức và đưa ra các thông báo lỗi code) cho rõ ràng:

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

Các "simple_fields_for: hình ảnh" phần mang lại đoạn HTML sau:

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

Để sử dụng mã Jasny, tôi nghĩ có lẽ tôi có thể thay thế "simple_fields_for: bức tranh" phần với mã từ tài liệu của họ, ngoại trừ việc -in khá attempt- vô vọng tôi đã thêm thủ công thẻ này vào thẻ đầu vào: id = "use r_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> 

Nó không hoạt động (duh: D). Tôi không đủ kỹ năng để hiểu sâu những gì đang diễn ra với phần javascript trong tệp tin bootstrap-fileupload.js của Jasny, cũng không phải dưới mui xe với simple_form, vì vậy tôi không biết liệu tôi có thể thay đổi thứ gì đó trong đó để làm cho nó hoạt động không. Một số googling nói với tôi rằng ai đó đã tạo ra phần mở rộng rails-jasny-bootstrap-extension, nhưng thật đáng buồn là không có mã nào trong nó ngoài các css và js ban đầu. Vẽ trống khá cứng ở đây.

Đối với ngữ cảnh: tài nguyên ở đây là Người dùng. user.rb của tôi trông như thế này (mã có liên quan):

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

Và mô hình hình ảnh của tôi trông như thế này:

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 

Ảnh chụp màn hình của sự khác biệt mong muốn, trực quan (bỏ qua phong cách):

Link to Jasny's bootstrap-fileupload.zip Cảm ơn bạn đã xem trước và xin lỗi vì tường văn bản; cho tôi biết nếu tôi cần thêm bất kỳ thông tin nào khác. (. PS .: nếu ai đó biết một sự thay thế dễ dàng, đó cũng sẽ được đánh giá cao)

Answer 1

Bạn có thể thử sử dụng tệp.field thay vì nhập.

Từ:

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

này sẽ không thêm người giúp đỡ hình thức lạ mắt từ simple_form.

Answer 2

Hãy thử điều này:

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

Chỉ cần chèn erb vào html bootstrap của.

Answer 3

Trong trường hợp bạn đã không tìm thấy một giải pháp thích hợp nào, ở đây là:

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

này nên sắp xếp một cách hoàn hảo với phần còn lại của lĩnh vực hình thức của bạn.