Rails simple_form içinde Jasny'nin bootstrap dosya yükleme stil uzantısı nasıl uygulanır?

Question

Rails simple_form resim yükleme alanımı Jasny's Twitter Bootstrap extension kullanarak şekillendirmek istiyorum. Görüntüleri yüklemek için zaten CarrierWave kullanıyorum.

Halen benim form çalışır ve kodu (bazı html, bazı form alanları götürüldüğünü ve hata mesajları kod hazırlamak ettik) netlik için şuna benzer:

<%= 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: resim" -in dışında kendi belgelerinden kodla Ben oldukça umutsuz kifli bölümünü:

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

Bence ben "resim simple_fields_for" yerini alabilir düşünce, Jasny kodu kullanmak için: bölümü aşağıdaki HTML verir ve bunu elle giriş etiketine ekledik: id = "use r_picture_attributes_image" name = "kullanıcı [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> 

O çalışmıyor (yaa: D). Jasny'nin bootstrap-fileupload.js'deki javascript bölümüyle ne de basit_form ile kaputun altında neler olup bittiğini anlamak için yeterli beceriye sahip değilim, bu yüzden işe yaraması için bir şeyi değiştirip değiştiremeyeceğimi bilmiyorum. Bazı googling bana birisinin rails-jasny-bootstrap-extension uzantısını yarattığını söylüyor, ancak ne yazık ki orijinal css ve js dışında bir kod yok. Çizim boş çok zor burada.

Bağlam için: burada kaynak Kullanıcıdır.

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

Ve resmim modeli şöyle görünür:: My user.rb bu (ilgili kod) benziyor

görsel (stil görmezden) istenen farkın

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 

Ekran Görüntüsü:

metnin duvara bir göz için şimdiden ve üzgün içinde

Link to Jasny's bootstrap-fileupload.zip sayesinde; Başka bilgi eklemem gerekirse bana bildirin. (. Ps .: birisi kolay bir alternatif biliyorsa, o da mutluluk duyacağız)

Answer 1

Girdi yerine file.field kullanmayı deneyebilirsiniz.

Gönderen:

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

için:

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

Bu simple_form gelen fantezi formu yardımcıları eklemez.Henüz uygun bir çözüm bulamadık durumda

Answer 2

bu deneyin:

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

Sadece Bootstrap adlı html içine erb yerleştirin.

Answer 3

, işte burada:

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

Bu form alanlarının geri kalanı ile mükemmel hizada olmalıdır.