如何将文件从HTML5拖放到Rails 3 App和Paperclip？

Question

我正在尝试使用Paperclip在Rails 3应用程序中获得一些html5拖放功能.所以,基本上:

1. 将一个或多个文件拖放到DIV上
2. 文件被POST到Rails动作(一起或一次一个)
3. Rails操作将每个文件保存为Paperclip中的新附件

现在,我能够实现这一目标的唯一方法是发送带有文件数据的XMLHttpRequest并让我的Rails操作读取request.raw_post ...这不是一个可行的解决方案,因为我需要发送其他POST参数和真实性令牌.

这是我到目前为止所拥有的:

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

我的控制器动作:

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

那么,使用其他参数将POST拖放文件拖放到我的应用程序的正确方法是什么？

(如果有帮助,我将整个实验作为公共GitHub回购)

Answer 1

看一下

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

并向下滚动到Ruby(在Rails上).这可能正是您正在寻找的,包括如何使用Rails 3和回形针的教程.根据我自己的经验,它就像一个魅力.

正如Joost评论的那样:https: //github.com/yortz/carrierwave_jquery_file_upload 显示了如何将carrierwave与jquery_file_upload结合起来的一个很好的例子

Answer 2

也许这些可以帮助： https: //github.com/valums/file-uploader和https://github.com/newbamboo/rack-raw-upload