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?
- Uno o más archivos son arrastrados y colocados en un DIV
- archivos se POST'ed a una acción de rieles (juntos o uno a la vez)
- 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)
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