Switch branches/tags
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
191 lines (142 sloc) 5.16 KB


Easy AJAX file uploading in Rails.


Modify your Gemfile:

gem 'jack_up'

and run bundle install from your shell.

Modify your application.js manifest:

//= require jquery
//= require underscore
//= require jack_up
//= require_tree .


Rails 3.1 (for the asset pipeline), CoffeeScript, and both jQuery and Underscore.js included in your application.js manifest.


Create a JackUp.Processor, binding to various events emitted.

$ -> # when the document is ready
  # create a new processor with the endpoint to where your assets are uploaded
  jackUp = new JackUp.Processor(path: '/assets')

  # called if upload is an image; returns an image jQuery object with src attribute assigned
  jackUp.on 'upload:imageRenderReady', (e, options) ->
    # assigns a data-attribute with the file guid for later referencing
    # set the border color to red, denoting that the image is still being uploaded
    options.image.attr("data-id", options.file.__guid__).css(border: "5px solid red")

  # upload has been sent to server; server will handle processing
  jackUp.on "upload:sentToServer", (e, options) ->
    # change the border color to yellow to signify successful upload (server is still processing)
    $("img[data-id='#{options.file.__guid__}']").css borderColor: 'yellow'

  # when server responds successfully
  jackUp.on "upload:success", (e, options) ->
    # server has completed processing the image and has returned a response
    $("img[data-id='#{options.file.__guid__}']").css(borderColor: "green")

  # when server returns a non-200 response
  jackUp.on "upload:failure", (e, options) ->
    # alert the file name
    alert("'#{}' upload failed; please retry")
    # remove the image from the dom since the upload failed

Once the processor is set up, wire up drag-and-drop support:


  # if you do not want the browser to redirect to the file when droped anywhere else on the page
  $(document).bind 'drop dragover', (e) ->

If you just want to bind to a standard <input type='file'>:


You can use both at the same time, referencing the same JackUp.Processor, in order to provide both options to your users.

Example Rails Setup

For instant file uploading:

# Gemfile
gem 'rails'
gem 'paperclip'
gem 'rack-raw-upload'

Using the rack-raw-upload gem allows for accessing the file posted to the controller via params[:file]; this makes it incredibly easy to handle file uploads.

# app/models/asset.rb
class Asset < ActiveRecord::Base
  has_attached_file :photo
  attr_accessible :photo

# app/controllers/assets_controller.rb
class AssetsController < ApplicationController
  def create
    @asset = params[:file])

      render json: @asset
      head :bad_request

This view code could be placed anywhere for immediate uploading:

  %span{ 'data-placeholder' => 'Drop files here' } Drop files here

%input.standard-attachment{ name: 'standard_attachment', accept: 'image/*', type: :file, multiple: :multiple }

Anything with a data-placeholder attribute will be hidden when an file is successfully dropped.

If attaching assets to a different model, additionally use:

# app/models/post.rb
class Post < ActiveRecord::Base
  has_many :assets, dependent: :destroy

  attr_accessible :asset_ids, :assets_attributes
  accepts_nested_attributes_for :assets

# app/controllers/posts_controller.rb
class PostsController < ApplicationController
  def new
    @post =

  def create
    @post =[:post])
    respond_with @post

To wire up the posts view:

# app/views/posts/new.html.haml
= form_for @post, html: { multipart: true } do |form|
  = form.text_field :title, { placeholder: 'Title' }

    %span{ 'data-placeholder' => 'Drop files here' } Drop files here

  %input.standard-attachment{ name: 'standard_attachment', accept: "image/*", type: :file, multiple: :multiple }

  = form.submit 'Create Post'
# app/assets/javascripts/
# truncated from above to demonstrate additional code to associate uploads
# with posts
jackUp.on "upload:success", (e, options) ->
  $("img[data-id='#{options.file.__guid__}']").css(borderColor: "green")

  # read the response from the server
  asset = JSON.parse(options.responseText)
  assetId =
  # create a hidden input containing the asset id of the uploaded file
  assetIdsElement = $("<input type='hidden' name='post[asset_ids][]'>").val(assetId)
  # append it to the form so saving the form associates the created post
  # with the uploaded assets


JackUp is copyright 2012 Josh Steiner, Josh Clayton, and thoughtbot, inc., and may be redistributed under the terms specified in the LICENSE file.