5 Oct
duccio

duccio il 5 October 2007 parla di Rails Snippet

Upload di file in Ajax

L’upload di file in Ajax crea problemi, per aggirarli potete utilizzare il plugin RespondsToParent. In poche parole il responds_to_parent consente al controllore di fare il respond dei parent document delle vostre pagine.

Praticamente il post del form viene fatto in un iframe e recuperato poi nel controllore tramite RJS usando il plugin.

Magari con un esempio si capisce meglio: supponiamo di voler fare l’upload di un’ immagine si prepara quindi un parziale nel quale c’è l’elenco delle immagini e il form per fare l’upload:

    1 <h1>Immagini</h1>
    2 <ul id="picture-list">
    3 <%= render :partial => '/resource/picture', :collection => picture_collection %>
    4 </ul>
    5 <div id="upload_picture">
    6   <% @resource = Resource.new %>
    7   <% form_for :resource, @resource, 
    8               :url => {:controller => 'resource', :action => "upload"}, 
    9               :html => {:multipart => true, :target => "upload_iframe"} do |f| %>
   10   <%= file_field  :file %>
   11   <%= submit_tag "upload" %>
   12   <% end %>
   13 <iframe id="upload_iframe" style="width:0px;height:0px;border:none" name="upload_iframe"></iframe>
   14 </div>
   15 
   16

E’ stato inserito un iframe usato come target dal form. Nel vostro controllore dovete mettere la funzione upload:

    1 def upload
    2   resource = Resource.create(params[:resource])
    3   responds_to_parent do
    4     render :update do |page|
    5       page.insert_html(:bottom, "picture-list", 
    6                        :partial => "/resource/picture", 
    7                        :object => resource)
    8     end
    9   end
   10 end

Così si inserisce la risorsa e si visualizza in RJS.

Chiaramente il Resource.create(params[:resource]) lo dovete implementare.

Puoi inviare un commento, o fare un trackback dal tuo sito.

2 Commenti a “Upload di file in Ajax”

  1. Gigio il 5 October 2007 alle 10:30 dice:

    Attenzione, che non funziona sempre, sopratutto nel tuo esempio, ovvero, se il partial è complesso o contiene caratteri strani il regex che fa respond to parent da problemi.

    Quindi in genere dopo:

    render update do |page|
    #si fa un semplice
    page << “alert(’upload avenuto con successo’);
    end

  2. duccio il 5 October 2007 alle 11:09 dice:

    Ciao,
    grazie per l’info cmq volevo solo far notare che io ho postato una versione molto più semplice di quella che ho implementato nella mia app. E con la mia versione non ho alcun problema con la regexp del plugin.

    Tnx

Scrivi un commento