Come trasferire file da HTML5 Drag-Drop a un'applicazione Rails 3 e alla graffetta?

Question

Sto cercando di ottenere alcune funzionalità di trascinamento della selezione HTML5 in un'applicazione Rails 3 con Paperclip. Quindi, in sostanza:

file

1. Uno o più sono trascinati e rilasciati su un DIV
2. file vengono POST'ed a un'azione Rails (insieme o uno alla volta)
3. Rails azione salva ogni file come un nuovo allegato in Paperclip

in questo momento l'unico modo per ottenere questo lavoro è inviando un XMLHttpRequest con i dati del file e avere la mia azione Rails leggere il request.raw_post ... questo non è una soluzione praticabile perché ho bisogno di inviare ulteriori parametri POST e il token di autenticità.

Ecco quello che ho finora:

<!-- IN MY VIEW --> 
<h2>Drag and drop upload</h2> 

<div id="drop"> 
    <h2>Drop Files Here</h2> 
</div> 

<script type="text/javascript" charset="utf-8"> 
    var dropbox = document.getElementById("drop"); 
    drop = function(evt) { 
    evt.stopPropagation(); 
    evt.preventDefault(); 
    var files = evt.dataTransfer.files; 
    var count = files.length; 
    if (count > 0) { 
     // handleFiles(files); 
     var url = '/images/raw'; 
     var request = new XMLHttpRequest(); 
     request.open("POST", url, true); // open asynchronous post request 
     request.send(files[0]); 
    } 
    } 
    dragEnter = function(evt) { 
    evt.stopPropagation(); 
    evt.preventDefault(); 
    } 
    dragExit = function(evt) { 
    evt.stopPropagation(); 
    evt.preventDefault(); 
    } 
    dragOver = function(evt) { 
    evt.stopPropagation(); 
    evt.preventDefault(); 
    } 
    // init event handlers 
    dropbox.addEventListener("dragenter", dragEnter, false); 
    dropbox.addEventListener("dragexit", dragExit, false); 
    dropbox.addEventListener("dragover", dragOver, false); 
    dropbox.addEventListener("drop", drop, false); 
</script> 

E la mia azione di controllo:

class ImagesController < ApplicationController 

    # ... Normal REST actions 

    def raw 
    name = "tmp_image.png" 
    data = request.raw_post 
    @file_content = File.open("#{Rails.root.to_s}/tmp/#{name}", "wb") do |f| 
     f.write(data) 
    end 
    @image = Image.new(:attachment => File.new("#{Rails.root.to_s}/tmp/#{name}")) 
    @image.save 
    File.unlink("#{Rails.root.to_s}/tmp/#{name}") 
    render :text => 'success'  
    end 
end 

Allora, qual è il modo corretto di inserire file drag-and-drop per la mia app con params supplementari ?

(Se aiuta, ho l'intero esperimento come public GitHub repo here)

Answer 1

Forse questi possono aiutare: https://github.com/valums/file-uploader e https://github.com/newbamboo/rack-raw-upload

Answer 2

Dai un'occhiata alla

https://github.com/blueimp/jQuery-File-Upload/wiki

e scorrere verso il basso a Ruby (su Rails). Probabilmente è esattamente quello che stai cercando, incluso un tutorial su come usarlo con Rails 3 e paperclip. E dalle mie esperienze personali funziona come un fascino.

E come Joost ha commentato: https://github.com/yortz/carrierwave_jquery_file_upload mostra un buon esempio di come coniugare carrierwave con jquery_file_upload