Come implementare l'estensione per lo styling dei file di bootstrap di Jasny in Rails simple_form?

Question

Desidero modellare il campo di caricamento dell'immagine Rota simple_form utilizzando Jasny's Twitter Bootstrap extension. Ho già (con successo) usato CarrierWave per caricare le immagini.

Attualmente, il mio modulo funziona, e il codice simile a questo (ho preso via alcuni html, alcuni campi del modulo e di elaborare i messaggi di errore di codice) per chiarezza:

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

Il "simple_fields_for: immagine" parte produce il seguente codice 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> 

Per utilizzare il codice Jasny, ho pensato che forse avrei potuto sostituire la "simple_fields_for: immagine" parte con il codice da loro documentazione, salvo che -in un bel attempt- senza speranza I' ve aggiunto manualmente questo al tag di input: id = "use r_picture_attributes_image" name = "utente [picture_attributes] [immagine]"

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

non funziona (duh: D). Non sono abbastanza abile da comprendere a fondo cosa sta succedendo con la parte javascript nel file bootstrap-fileupload.js di Jasny, né sotto la cappa con simple_form, quindi non so se potrei cambiare qualcosa lì dentro per farlo funzionare. Alcuni googling mi dicono che qualcuno ha creato l'estensione rails-jasny-bootstrap-extension, ma purtroppo non c'è ancora un codice in esso a parte i css e js originali. Disegno in bianco piuttosto difficile qui.

Per il contesto: la risorsa è Utente. Il mio user.rb assomiglia a questo (codice rilevante):

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

E il mio modello di immagine simile a questa:

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 

Schermata della differenza desiderata, visivamente (ignorare lo stile):

Link to Jasny's bootstrap-fileupload.zip Grazie in anticipo per dare un'occhiata, e mi dispiace per il muro di testo; fammi sapere se ho bisogno di aggiungere altre informazioni. (. PS .: se qualcuno sa un'alternativa facile, che sarebbe anche apprezzato)

Answer 1

Puoi provare a utilizzare il file.field anziché l'input.

Da:

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

A:

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

Questo non aggiungerà gli helper delle form di fantasia da simple_form.

Answer 2

Prova questa:

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

basta inserire erb in html di bootstrap.

Answer 3

Nel caso in cui non avete ancora trovato una soluzione adeguata, eccolo:

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

Questo dovrebbe allinearsi perfettamente con il riposo dei vostri campi del modulo.