Jak zaimplementować rozszerzenie stylu ładowania ładującego Jaślaka w Railsach simple_form?

Question

Chcę, aby moje pole Railsów przesyłano w prostym polu przesyłania obrazów za pomocą Jasny's Twitter Bootstrap extension. Już (z powodzeniem) używam CarrierWave do przesyłania zdjęć.

Obecnie moja forma działa, a kod wygląda następująco (I zostały zabrane jakieś html, kilka pól formularza i opracowanie komunikatów o błędach Code) dla jasności:

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

W „simple_fields_for: obraz” część daje następujący kod 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> 

użyć kodu Jasny, pomyślałem, może mógłbym wymienić „simple_fields_for: obraz” część z kodem z ich dokumentacją, oprócz tego, że -w całkiem beznadziejny attempt- I” ve ręcznie dodał to do input-tag: id = "use r_picture_attributes_image”name = "user [picture_attributes] [Obrazek]"

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

To nie działa (duh: D). Nie jestem na tyle biegły, by zrozumieć, co się dzieje z częścią javascript w bootstrap-fileupload.js Jasnego, ani pod maską z simple_form, więc nie wiem, czy mógłbym coś tam zmienić, żeby działało. Niektórzy googli mówią, że ktoś stworzył rozszerzenie rails-jasny-bootstrap-extension, ale nie ma w nim jeszcze kodu poza oryginalnymi css i js. Rysunek pusty dość mocno tutaj.

Dla kontekstu: źródłem tutaj jest Użytkownik. Moja user.rb wygląda następująco (odpowiedni kod):

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

A mój model obraz wygląda tak:

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 

Screenshot pożądanego różnicą, wizualnie (zignorować stylizacji):

Link to Jasny's bootstrap-fileupload.zip Z góry dziękuję za spojrzenie i przepraszam za ścianą tekstu; daj mi znać, jeśli chcę dodać inne informacje. (. PS .: czy ktoś zna łatwą alternatywę, która również zauważyć)

Answer 1

Możesz spróbować użyć pliku file.field zamiast wejścia.

Od:

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

Do:

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

To nie doda fantazyjne pomocników formularza z simple_form.

Answer 2

Spróbuj tego:

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

Wystarczy włożyć erb w html Bootstrap za.

Answer 3

Jeśli nie znalazłeś jeszcze odpowiedniego rozwiązania, oto ona:

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

ta powinna idealnie wyrównać z resztą pól formularza.