バックボーン+ Railsのペーパークリップ "非同期アップロード

Question

私はRailsのクリップ"宝石バックボーン&を使用して非同期の写真のアップロード実装しています

：

質問：

1. は、私はjQueryのアップロードを使用する必要がありますが（または同等のlib）？
2. もしそうなら、単にライブラリを呼び出すためにphotocollection.syncをオーバーライドするのですか？

Item.rb

class Item < ActiveRecord::Base 
    has_many: photos 
    ... 

Photo.rb

class Photo < ActiveRecord::Base 

    attr_accessible :photo 
    belongs_to :item 

    has_attached_file :photo 
... 

ItemView.js.coffee

class MySite.Views.Items.Edit extends Backbone.View 

    template: JST['items/edit'] 

    initialize: -> 
    @modelBinder = new Backbone.ModelBinder 
    @model.on('change', @render(), this) 

    events: -> 
    'submit #edit_item_form' : 'save_item' 

    render: -> 
    $(@el).html @template(item: @model) 

    @new_photo = @model.new_photo() 

    @modelBinder.bind @model, $("#item_fields") 
    @modelBinder.bind @new_photo, $("#photo_fields") 
    @ 

    save_item: (e) -> 
    e.preventDefault() 
    @model.save() 
    @new_photo.save() 

Edit.jst.eco

<form id="edit_item_form" accept-charset="UTF-8" data-remote="true" enctype="multipart/form-data"> 
<div id="item_fields"> .... </div> 
<div id="photo_fields"> 
    <input type="file" id="upload_photo" name="photo[photo]" /> 
</div> 
... 

全体的な設計改善のための件の

提案が、私は、IFRAMEのアップロードが簡単&クロスブラウザのサポートを選ぶことになった

Answer 1

歓迎されています。実装は、実際にはかなり簡単です：

MyView.js.coffee：

events: -> 
    'change #upload_photos' : 'upload_photo' 

    upload_photo: (e) -> 
    upload_frame = $('#add_photo_form') 
    upload_frame.prop 'target', 'upload_frame' 
    upload_frame.submit() 

MyTemplate.jst.eco：

<form id="add_photo_form" method="POST" action="/api/v1/photos" enctype="multipart/form-data"> 
    <div id="photo_fields"> 
     <input type="file" id="upload_photos" name="photo[photo]" multiple> 
     <input type="hidden" name="authenticity_token" value="<%= $("meta[name='csrf-token']").attr("content") %>"> 
    </div> 
</form> 
<iframe id='upload_frame' name='upload_frame' src=''></iframe> 

CSRFトークンの追加を注意してください。それがなければ、リクエストは失敗します。&あなたのセッションはクリアされています。