Search code examples
ruby-on-railsbackbone.jscoffeescriptpaperclipajax-upload

Backbone + Rails 'Paperclip' Async Uploads


I'm implementing async photo uploads using backbone & the rails 'paperclip' gem:

Questions:

  1. Do I need to use jQuery upload (or equivalent lib)?
  2. If so, do I simply override photocollection.sync to call the library?

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

Suggestions for overall design improvement are welcome


Solution

  • I ended up opting for the simplicity & cross-browser support of the iframe upload. Implementation is actually pretty trivial:

    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>
    

    Note the addition of the CSRF Token. Without it, the request will fail & have your session cleared.