2010-09-21 14 views
18

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:Cómo publicar archivos desde HTML5 Arrastrar y colocar en Rails 3 App & Paperclip?

  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)

+0

escribí mi experiencia haciendo esto @ http://marc-bowes.com/2011/08/17/ drag-n-drop-upload.html. Solución realmente fácil de implementar para cargas de archivos múltiples (relativamente pequeñas). – Marc

Respuesta

8

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

+2

El enlace de la wiki de arriba ha cambiado. Aquí hay uno que actualmente funciona con el uso de carrierwave y DragonFly: https://github.com/blueimp/jQuery-File-Upload/wiki/Rails-setup-for-V5. Aquí hay otro ejemplo para carrierwave: https://github.com/yortz/carrierwave_jquery_file_upload –

Cuestiones relacionadas