如何将文件从HTML5拖放到Rails 3 App&回形针？ [英] How to POST files from HTML5 Drag-Drop to a Rails 3 App & Paperclip?

问题描述

我试图通过Paperclip在Rails 3应用程序中获得一些html5拖放功能。所以，基本上：

I'm trying to get some html5 drag-and-drop functionality in a Rails 3 app with Paperclip. So, basically:

1. 一个或多个文件被拖放到DIV上


2. 文件是发布到Rails操作（一次或一次）


3. Rails操作将每个文件作为PaperClip中的新附件保存

现在，我可以得到这个工作的唯一方法是通过发送一个XMLHttpRequest与文件数据，并让我的Rails动作读取request.raw_post ...这不是一个可行的解决方案，因为我需要发送附加的POST参数和真实性令牌。

Right now the only way I can get this working is by sending an XMLHttpRequest with the File data and having my Rails action read the request.raw_post ... this isn't a workable solution because I need to send along additional POST params and the authenticity token.

这是我迄今为止所做的：

Here's what I have so far:

<!-- 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的正确方法是什么将文件拖放到我的应用程序附加参数？

So, what's the proper way to POST drag-and-drop files to my app with additional params?

（如果有帮助，我将整个实验作为 public GitHub repo here ）

(If it helps, I have the entire experiment as a public GitHub repo here)

推荐答案

看看

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

并向下滚动到Ruby（在Rails上）。这可能正是您正在寻找的内容，包括有关如何使用Rails 3和回形针的教程。而从我自己的经验来看，它的作用就像一个魅力。

and scroll down to Ruby (on Rails). That probably is exactly what you are looking for, including a tutorial on how to use it with Rails 3 and paperclip. And from my own experiences it works like a charm.

而Joost评论说：
https://github.com/yortz/carrierwave_jquery_file_upload
显示了如何将载波与jquery_file_upload组合起来的一个很好的例子

And as Joost commented: https://github.com/yortz/carrierwave_jquery_file_upload shows a nice example of how to combine carrierwave with jquery_file_upload

这篇关于如何将文件从HTML5拖放到Rails 3 App&回形针？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！