fine uploader

in Ruby on Rails

Come implementare un drag&drop per l’upload multiplo di immagini in Ruby on Rails

E’ oramai una consuetudine nelle moderne applicazioni web fornire un un sistema di upload di immagini usando il drag & drop. Partendo da un caso reale che ho sviluppato, vi spiego come farlo in Ruby on Rails.

drag drop immagini

In questo piccolo tutorial faremo uso di Fine Uploader, una libreria Javascript che si occupa della gestione del drag & drop sulla pagina web. La libreria è alla versione 3.3 ed è, a mio parere, davvero molto ben sviluppata. Si può utilizzare in unione a jQuery oppure semplicemente usando le direttive native Javascript. Tra le caratteristiche principali, vi segnalo queste:

  • Compatibile con tutti i browser moderni e con IE dalla versione 7 in avanti. Per Internet Explorer chiaramente c’è un fallback su iframe, mentre per gli altri browser l’implementazione avviene tramite XMLHttpRequest che consente l’upload multiplo in AJAX con progress bar.
  • Non fa uso di Flash e jQuery è opzionale
  • Upload immediati o tramite accodamento
  • Integrazione con Twitter Bootstrap

Fine Uploader è fornito anche tramite una gemma che andremo ad aggiungere al nostro progetto.

Per gestire l’effettivo upload serverside, faremo uso di Carrierwave e di una versione modificata della classe StringIO per l’upload di file da stringhe.

Il progetto che ho sviluppato fa uso di Twitter Bootstrap quindi troverete nel codice alcune classi CSS specifiche di questo framework.

immagini caricate

Procediamo con dettagliare i pezzi di codice necessari. Iniziamo con il Gemfile:

Andiamo a creare questo file in config/initializers/stringiohax.rb, come descritto dal wiki di Carrierwave:

Includiamo i javascript e i css necessari per attivare Fine Uploader nel nostro progetto. Come descritto dalla pagina GitHub della gemma, includiamo la libreria javascript nel nostro application.js:

e aggiungiamo anche il foglio di stile nel nostro CSS (application.css):

Modello e controller Image

E’ stato creato un modello Image che detiene tutte le informazioni sull’immagine caricata. Il modello creato fa uso di un uploader, attachmentUploader, creato tramite il generatore di Carrierwave e poi modificato aggiungendo la creazione di un thumbnail chiamato :thumb, di cui faremo uso nel controller:

Il modello risultante è il seguente:

che fa riferimento a questa tabella nel database:

Il controller gestisce due azioni: la creazione (upload) dell’immagine e la sua eliminazione. L’unica particolarità è l’uso di AppSpecificStringIO nel metodo create. Questo è il codice:

Viste e Javascript

La parte client-side richiede semplici modifiche. Nella vista (form.html.haml) aggiungiamo l’elemento che conterrà la drop-zone per il drag & drop:

Nella stessa vista ci sarà anche la parte relativa alla modifica delle immagini già caricate. Nel nostro caso specifico, si fa uso di simple_form e le immagini sono delle risorse annidate (nested resource) di un oggetto coupon:

Poi aggiungiamo in application.js questo metodo che si occupa di attivare Fine Uploader nella pagina:

L’unica particolarità di cui tener conto è l’opzione forceMultipart:false, indispensabile per far funzionare l’upload delle immagini via AJAX.

Conclusioni

Il sistema sviluppato si integra perfettamente con Bootstrap, creando un form drag & drop responsive e le opzioni messe a disposizione dalla libreria ci consentono di personalizzare completamente l’uploader.

Grazie a Rails e alla sua community ancora una volta siamo riusciti a creare un complesso sistema di caricamento multiplo delle immagini in breve tempo.

Scrivi un commento

Commenta

Ricevi un avviso se ci sono nuovi commenti. Oppure iscriviti senza commentare.