Upload multiplo di immagini in rails attraverso ajax

Lato backoffice la richiesta più consueta è quella di gestire immagini in modo semplice e veloce, per farlo è fondamentale fornire un sistema di upload efficente che permetta all'utente di eseguire upload multipli e che si prenda la briga di ridimensionare il pool di immagini date in pasto all'applicazione, richiesta non banale è quella di "ajaxizzare" (passatemi la brutta traduzione) la pagina.

Creiamo la nostra applicazione

rails -d mysql swfupload2

 ricordatevi configurare correttamente il file database.yml per la connessione al db locale.

Ora installiamo qualche plugin che ci aiuteranno a svolgere il lavoro sporco:

attachment_fu: ci permette di gestire in modo veloce upload di singole immagini e di ridimensionarle a nostro piacimento, per maggiori info cliccate qui, per installarlo

ruby script/plugin install http://svn.techno-weenie.net/projects/plugins/attachment_fu/

swfupload_fu: ci aiuta ad integrare SWFUpload nelle applicazioni ruby on rails. SWFUpload è una piccola libreria javascript/flash per gestire upload multipli, per installarla

ruby script/plugin install git://github.com/alex3t/swfupload_fu.git

mime-types: questa gemma ci aiuta a gestire i MIME types, nel nostro caso sarà necesario risettare il mime-types del file caricato in quanto flash non lo fa, per installarla

gem install mime-types

 Abbiamo tutto il necessario, al lavoro! Creiamo lo schema che ospiterà le immagini caricate:

è stato creato uno schema vuoto in quanto attachment_fu a bisogno di campi ben precisi per il caricamento delle immagini, nella migration creata aggiungiamo

class CreatePhotos < ActiveRecord::Migration
  def self.up
    create_table :photos do |t|
	  t.column :parent_id,  :integer
      t.column :content_type, :string
      t.column :filename, :string    
      t.column :thumbnail, :string 
      t.column :size, :integer
      t.column :width, :integer
      t.column :height, :integer

      t.timestamps
    end
  end

  def self.down
    drop_table :photos
  end
end

 Creiamo il modello che conterrà le informazioni dei file caricati

ruby script/generate model photo

e all'interno di esso specifichiamo

has_attachment  :storage      => :file_system,
			  :size     => 0.megabytes...1.megabytes,
			  :resize_to    => '800x600>',
			  :thumbnails   => { :thumb => '100x100>', :medium => '300x300>', :high => '500x500>'},
			  :processor    => :MiniMagick
validates_as_attachment				  

 con il metodo has_attachment andiamo a dire ad attachment_fu cosa fare con le immagini caricate, mente con validates_as_attachment andiamo a scartare tutte le immagini al di fuori delle carateristiche specificate.

Ci manca solo il controller che nel nostro esempio avrà solo i metodi new e create

ruby script/generate controller photo new create  

 nella view associata all'action new aggiungiamo il form di swfupload e provediamo a specifiare l'azione da chiamare

Upload A photo:	

nell'azione create che andrà a salvare i file nel filesystem e aggiornerà il modello photo mettiamo qualcosa del genere

def create

	@photo = Photo.new :swf_uploaded_data => params[:Filedata]
	if @photo.save
	  flash[:notice] = 'Photo was successfully created.'
	else
	  flash[:notice] = 'Photo was not successfully created.'
	end
end

ricordiamoci di includer i file js e css per il funzionamento di swfupload_fu

e di spcificare nel model photo che vogliamo usare la gemma precedentemente installata

require 'mime/types'

e di settare il corretto mime-types

def swf_uploaded_data=(data)
	data.content_type = MIME::Types.type_for(data.original_filename)
	self.uploaded_data = data
end  

 Finito!

Se volete scaricare l'esempio per chiarirvi le idee ecco qui.