jack_up

by thoughtbot

thoughtbot / jack_up

[DEPRECATED] Easy AJAX file uploading in Rails

206 Stars 30 Forks Last release: Not found MIT License 24 Commits 4 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Deprecated as of October 7, 2016

Given other both paid and free uploading tools available, JackUp has been deprecated.

JackUp

Easy AJAX file uploading in Rails.

Install

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 .

Requirements

Rails 4.0+, CoffeeScript, and both jQuery and Underscore.js included in your

application.js
manifest.

Usage

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") $('.file-drop').append(options.image)

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("'#{options.file.name}' upload failed; please retry") # remove the image from the dom since the upload failed $("img[data-id='#{options.file.guid}']").remove()

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

  $('.file-drop').jackUpDragAndDrop(jackUp)

if you do not want the browser to redirect to the file when droped anywhere else on the page

$(document).bind 'drop dragover', (e) -> e.preventDefault()

If you just want to bind to a standard

:
  $('.standard-attachment').jackUpAjax(jackUp)

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
end

app/controllers/assets_controller.rb

class AssetsController < ApplicationController def create @asset = Asset.new(photo: asset_params[:file])

if @asset.save
  render json: @asset
else
  head :bad_request
end

end

private

def asset_params params.permit(:file) end end

This view code could be placed anywhere for immediate uploading:

.file-drop
  %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

accepts_nested_attributes_for :assets end

app/controllers/posts_controller.rb

class PostsController < ApplicationController def new @post = Post.new @post.assets.build end

def create @post = Post.new(post_params) @post.save respond_with @post end

private

def post_params params.require(:post).permit(:asset_ids, :assets_attributes) end end

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' }

.file-drop %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/posts.coffee

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 = asset.id

create a hidden input containing the asset id of the uploaded file

assetIdsElement = $("").val(assetId)

append it to the form so saving the form associates the created post

with the uploaded assets

$(".file-drop").parent("form").append(assetIdsElement)

License

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.