• This repository has been archived on 11/Nov/2017
  • Stars
    star
    202
  • Rank 193,691 (Top 4 %)
  • Language
    Ruby
  • License
    MIT License
  • Created over 12 years ago
  • Updated about 8 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

[DEPRECATED] Easy AJAX file uploading in Rails

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 <input type='file'>:

  $('.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 = $("<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
  $(".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.

More Repositories

1

guides

A guide for programming in style.
Ruby
9,327
star
2

bourbon

A Lightweight Sass Tool Set
Ruby
9,100
star
3

paperclip

Easy file attachment management for ActiveRecord
Ruby
9,055
star
4

laptop

A shell script to set up a macOS laptop for web and mobile development.
Shell
8,416
star
5

dotfiles

A set of vim, zsh, git, and tmux configuration files.
Shell
7,942
star
6

factory_bot

A library for setting up Ruby objects as test data.
Ruby
7,826
star
7

administrate

A Rails engine that helps you put together a super-flexible admin dashboard.
JavaScript
5,867
star
8

neat

A fluid and flexible grid Sass framework
Ruby
4,444
star
9

suspenders

A Rails template with our standard defaults, ready to deploy to Heroku.
Ruby
3,922
star
10

til

Today I Learned
3,903
star
11

clearance

Rails authentication with email & password.
Ruby
3,629
star
12

shoulda-matchers

Simple one-liner tests for common Rails functionality
Ruby
3,513
star
13

Argo

Functional JSON parsing library for Swift
Swift
3,487
star
14

high_voltage

Easily include static pages in your Rails app.
Ruby
3,141
star
15

rcm

rc file (dotfile) management
Perl
2,990
star
16

factory_bot_rails

Factory Bot ♥ Rails
Ruby
2,972
star
17

shoulda

Makes tests easy on the fingers and the eyes
Ruby
2,196
star
18

expandable-recycler-view

Custom Android RecyclerViewAdapters that collapse and expand
Java
2,073
star
19

capybara-webkit

A Capybara driver for headless WebKit to test JavaScript web apps
Ruby
1,969
star
20

gitsh

An interactive shell for git
Ruby
1,957
star
21

Tropos

Weather and Forecasts for Humans
Swift
1,518
star
22

refills

[no longer maintained]
CSS
1,513
star
23

design-sprint

Product Design Sprint Material
1,415
star
24

bitters

Add a dash of pre-defined style to your Bourbon.
HTML
1,398
star
25

griddler

Simplify receiving email in Rails (deprecated)
Ruby
1,376
star
26

trail-map

Trails to help designers and developers learn various topics.
1,219
star
27

appraisal

A Ruby library for testing your library against different versions of dependencies.
Ruby
1,194
star
28

hotwire-example-template

A collection of branches that transmit HTML over the wire.
Ruby
1,033
star
29

parity

Shell commands for development, staging, and production parity for Heroku apps
Ruby
890
star
30

Runes

Infix operators for monadic functions in Swift
Swift
830
star
31

cocaine

A small library for doing (command) lines.
Ruby
788
star
32

fishery

A library for setting up JavaScript objects as test data
TypeScript
759
star
33

flutie

View helpers for Rails applications
Ruby
730
star
34

TBAnnotationClustering

Example App: How To Efficiently Display Large Amounts of Data on iOS Maps
Objective-C
728
star
35

vim-rspec

Run Rspec specs from Vim
Vim Script
650
star
36

climate_control

Modify your ENV
Ruby
512
star
37

constable

Better company announcements
Elixir
511
star
38

carnival

An unobtrusive, developer-friendly way to add comments
Haskell
501
star
39

ruby-science

The reference for writing fantastic Rails applications
Ruby
494
star
40

Curry

Swift implementations for function currying
Swift
494
star
41

pacecar

Generated scopes for ActiveRecord classes
Ruby
437
star
42

hoptoad_notifier

Reports exceptions to Hoptoad
Ruby
408
star
43

fake_stripe

A Stripe fake so that you can avoid hitting Stripe servers in tests.
Ruby
393
star
44

json_matchers

Validate your JSON APIs
Ruby
384
star
45

Swish

Nothing but Net(working)
Swift
363
star
46

superglue

A productive library for Classic Rails, React and Redux
JavaScript
361
star
47

paul_revere

A library for "one off" announcements in Rails apps.
Ruby
298
star
48

stencil

Android library, written exclusively in kotlin, for animating the path created from text
Kotlin
282
star
49

Perform

Easy dependency injection for storyboard segues
Swift
280
star
50

upcase

Sharpen your programming skills.
Ruby
275
star
51

testing-rails

Source code for the Testing Rails book
HTML
269
star
52

proteus

[no longer maintained]
Ruby
254
star
53

Delta

Managing state is hard. Delta aims to make it simple.
Swift
246
star
54

foundry

Providing a new generation of vector assets and infinite possibility for the interactive web and mobile applications
CSS
233
star
55

limerick_rake

A collection of useful rake tasks.
Ruby
232
star
56

shoulda-context

Shoulda Context makes it easy to write understandable and maintainable tests under Minitest and Test::Unit within Rails projects or plain Ruby projects.
Ruby
231
star
57

backbone-support

lumbar support
JavaScript
227
star
58

terrapin

Run shell commands safely, even with user-supplied values
Ruby
216
star
59

Superb

Pluggable HTTP authentication for Swift.
Swift
203
star
60

fistface

DIY @font-face web service.
Ruby
182
star
61

squirrel

Natural-looking Finder Queries for ActiveRecord
Ruby
178
star
62

sortable_table

Sort HTML tables in your Rails app.
Ruby
157
star
63

write-yourself-a-roguelike

Write Yourself A Roguelike: Ruby Edition
Ruby
155
star
64

pester

Automatically ask for a PR review
Ruby
147
star
65

jester

REST in Javascript
JavaScript
146
star
66

complexity

A command line tool to identify complex code
Rust
142
star
67

kumade

Heroku deploy tasks with test coverage (DEPRECATED, NO LONGER BEING DEVELOPED)
Ruby
137
star
68

proteus-middleman

[no longer maintained]
CSS
133
star
69

FunctionalJSON-swift

Swift
133
star
70

capybara_discoball

Spin up an external server just for Capybara
Ruby
128
star
71

tropos-android

Weather and Forecasts for Humans
Kotlin
128
star
72

ModalPresentationView

Remove the boilerplate of modal presentations in SwiftUI
Swift
125
star
73

react-native-typescript-styles-example

A template react native project for ergonomic styling structure and patterns.
TypeScript
123
star
74

vimulator

A JavaScript Vim simulator for demonstrations
JavaScript
119
star
75

bourne

[DEPRECATED] Adds test spies to mocha.
Ruby
114
star
76

formulator

A form library for Phoenix
Elixir
106
star
77

poppins

Gifs!
Objective-C
106
star
78

tailwindcss-aria-attributes

TailwindCSS variants for aria-* attributes
JavaScript
100
star
79

ghost-theme-template

A project scaffold for building ghost themes using gulp, node-sass, & autoprefixer
HTML
91
star
80

paperclip_demo

Paperclip demo application
Ruby
87
star
81

middleman-template

The base Middleman application used at thoughtbot, ready to deploy to Netlify.
CSS
86
star
82

proteus-jekyll

[no longer maintained]
CSS
84
star
83

report_card

metrics and CI are for A students.
Ruby
77
star
84

ios-sample-blender

Sample code for the Blending Modes blog post
Objective-C
76
star
85

yuri-ita

Create powerful interfaces for filtering, searching, and sorting collections of items.
Ruby
76
star
86

baccano

[no longer maintained]
HTML
74
star
87

goal-oriented-git

A practical book about using Git
HTML
73
star
88

ios-on-rails

A guide to building a Rails API and iOS app
HTML
72
star
89

art_vandelay

Art Vandelay is an importer/exporter for Rails 6.0 and higher.
Ruby
71
star
90

maybe_haskell

Programming without Null
HTML
71
star
91

redbird

A Redis adapter for Plug.Session
Elixir
70
star
92

maintaining-open-source-projects

A successful open source project is not only one that is original, solves a particular problem well, or has pristine code quality. Those are but the tip of the iceberg, which we'll thoroughly dissect with this book.
Shell
67
star
93

templates

Documentation templates for open source projects.
64
star
94

FOMObot

A slack bot to help with FOMO.
Haskell
61
star
95

BotKit

BotKit is a Cocoa Touch static library for use in iOS projects. It includes a number of helpful classes and categories that are useful during the development of an iOS application.
Objective-C
61
star
96

react-native-template

Template React Native project to be used with Cookiecutter
JavaScript
60
star
97

CombineViewModel

An implementation of the Model-View-ViewModel (MVVM) pattern using Combine.
Swift
59
star
98

flightdeck

Terraform modules for rapidly building production-grade Kubernetes clusters following SRE practices
HCL
55
star
99

design-for-developers-starter-kit

A starter project for design for developer students
CSS
54
star
100

mile_marker

Mark off HTML implementation expectations with clear signage
Ruby
53
star