iframe remoting pattern & respond_to_parent

Artikel ini adalah lanjutan dari artikel sebelumnya tentang file upload menggunakan attachment_fu.
Saat itu, alur dari proses upload adalah :

• Dari halaman index, pilih menu Upload new image.
• Redirected ke halaman Upload.
• Di halaman Upload, pillih file dan tekan submit.
• Di-redirect lagi ke halaman index.

Hmm..berapa kali kita berpindah halaman untuk satu proses yah..??
Gimana kalo semua proses tersebut dilakukan dalam satu halaman (page) ?

Ok..kita bisa melakukannya dengan menggunakan Ajax form. Tapi tunggu dulu, javascript tidak bisa melakukan akses ke filesystem, ketika melakukan pengiriman file, hanya nama filenya aja yang dikirim, trus filenya kemana..??? nah itu dia masalahnya.

Kita bisa merealisasikan rencana kita ini dengan iframe remoting pattern , mirip kaya ajax, tidak ada perpindahan halaman, tidak ada refresh di halaman, cuman ada progress bar yang berjalan ketika kita men-submit form. Tapi itu bukan masalah kan? yang penting ngga ada perpindahan halaman dan ngga ada refresh halaman.

Untuk melakukannya kita hanya membutuhkan sebuah iframe tersembunyi, dan target dari form kita adalah iframe tersebut.

• Modifikasi file index.html.erb sehingga menjadi seperti ini:

  <h1>Uploaded Images</h1>
   formatted_images_path(:format => :js), :html => { :multipart => true, :target => 'upload_frame' }) do |f| -%>
  
      Upload An Image:
  
  <ul>
  
     'list', :locals => {:image => image} %>
  </ul>
  

• Untuk menangani visual effect di halaman index, kita buat sebuah partial untuk image list di :
  app/views/images/_list.html.erb

  	<li id="image_">
    </li>
  

• Buatlah layout default di: app/views/layouts/application.html.erb untuk memasukkan javascript helper.

  
      Image Upload
  

• Untuk menghandle form upload di server, kita gunakan plugin responds_to_parent buatan Sean Treadway.

  script/plugin install http://responds-to-parent.googlecode.com/svn/trunk/
  

  Jangan lupa untuk merestart server setelah menginstal plugin.
  respond_to_parent akan mengirim response ke halaman parent, tidak ke iframe, sehingga kita dapat mengolah response ini dengan leluasa di halaman parent.

• Kemudian pada method create di controller images kita ubah menggunakan respond_to_parent pada response format js menjadi seperti ini:

    def create
      new
      @image = Image.new(params[:image])
      respond_to do |format|
        if @image.save
          format.html { redirect_to images_url(@image) }
          format.js do
            responds_to_parent do
              render :update do |page|
                page.insert_html :bottom, "images", :partial => 'list', :locals => {:image => @image}
                page.visual_effect :highlight, "image_#{@image.id}"
              end
            end
          end
        else
          format.html { render :action => "new" }
          format.js do
            responds_to_parent do
              render :update do |page|
                # update the page with an error message
              end
            end
          end
        end
      end
    end
  

• Dan jadilah Ajax file upload kita.