Cómo publicar archivos desde HTML5 Arrastrar y colocar en Rails 3 App & Paperclip?

Question

Estoy tratando de obtener algo de funcionalidad de arrastrar y colocar html5 en una aplicación de Rails 3 con Paperclip. Así que, básicamente:

1. Uno o más archivos son arrastrados y colocados en un DIV
2. archivos se POST'ed a una acción de rieles (juntos o uno a la vez)
3. rieles acción guarda cada uno de los archivos como un nuevo archivo adjunto en Paperclip

en este momento la única manera que puedo conseguir este trabajo es mediante el envío de un XMLHttpRequest con los datos del archivo y tener mi acción rieles leyó el request.raw_post ... esto no es una solución viable porque necesito enviar a lo largo de los parámetros adicionales POST y el token de autenticidad.

Esto es lo que tengo hasta ahora:

<!-- 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> 

Y mi acción del controlador:

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 

Así que, ¿cuál es la forma correcta de publicar archivos de arrastrar y soltar a mi aplicación con params adicionales ?

(Si ayuda, tengo todo el experimento como un public GitHub repo here)

Answer 1

Tal vez estos pueden ayudar: https://github.com/valums/file-uploader y https://github.com/newbamboo/rack-raw-upload

Answer 2

Tenga una mirada en

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

y baje a Ruby (en Rails). Eso probablemente es exactamente lo que estás buscando, incluido un tutorial sobre cómo usarlo con Rails 3 y clip. Y desde mi propia experiencia funciona como un encanto.

Y como Joost comentó: https://github.com/yortz/carrierwave_jquery_file_upload muestra un buen ejemplo de cómo combinar carrierwave con jquery_file_upload