Как файлы POST из HTML5 Drag-Drop в Rails 3 App & Paperclip?

Я пытаюсь получить некоторые функции перетаскивания html5 в приложении Rails 3 с помощью Paperclip. Итак, в основном:

  • Один или несколько файлов перетаскиваются на DIV
  • Файлы POST'ed для действия Rails (вместе или по одному)
  • Функция Rails сохраняет все файлы в качестве нового вложения в папке

В настоящее время единственным способом получить эту работу является отправка XMLHttpRequest с данными файла и выполнение моего Rails файла read.raw_post... это не работоспособное решение, потому что мне нужно отправить дополнительный POST params и токен аутентификации.

Вот что я до сих пор:

<!-- 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 здесь)

Ответы

Ответ 1

Посмотрите

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

и прокрутите вниз до Ruby (on Rails). Вероятно, это именно то, что вы ищете, в том числе учебник о том, как использовать его с Rails 3 и скрепкой. И из моего собственного опыта это работает как шарм.

И как Joost прокомментировал: https://github.com/yortz/carrierwave_jquery_file_upload показывает хороший пример того, как комбинировать несущую с jquery_file_upload