Jak przesłać pliki POST z HTML5 Drag-Drop do aplikacji Rails 3 i spinacza?

Question

Próbuję uzyskać funkcję przeciągania i upuszczania html5 w aplikacji Rails 3 z Paperclip. Tak więc, w zasadzie:

1. Jeden lub więcej plików są przeciągane na DIV
2. Pliki są POST'ed do działania Rails (łącznie lub jeden na raz)
3. Szyny akcja zapisuje każdy pliki jako nowy załącznik w spinaczu do papieru

W tej chwili jedyny sposób, w jaki mogę to zrobić, to wysłanie XMLHttpRequest z danymi pliku i posiadanie mojej akcji Railsowej odczytać request.raw_post ... to nie jest praktyczne rozwiązanie ponieważ muszę wysyłać dodatkowe parametry POST i token autentyczności.

Oto co mam do tej pory:

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

I moje działania kontrolera:

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 

Więc, jaki jest właściwy sposób opublikować pliki przeciągnij i upuść do mojego app z dodatkowymi params ?

(Jeśli to nie pomaga, mam cały eksperyment jako public GitHub repo here)

Answer 1

Może to pomóc: https://github.com/valums/file-uploader i https://github.com/newbamboo/rack-raw-upload

Answer 2

Wystarczy popatrzeć na

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

i przewiń w dół do Rubiego (na szynach). To prawdopodobnie dokładnie to, czego szukasz, w tym samouczek na temat korzystania z Rails 3 i spinacza. I z moich własnych doświadczeń działa jak urok.

I jak Joost komentuje: https://github.com/yortz/carrierwave_jquery_file_upload pokazuje piękny przykład jak połączyć carrierwave z jquery_file_upload