jQuery Railsで使えるGem

Rails3でajaxでD&Dでまとめてファイルアップロードをスクラッチで~jQueryFileUpload for Rails

投稿日:

参考

Rails3でajaxでD&Dでまとめてファイルアップロード~jQueryFileUpload for Rails

Rails3でajaxでD&Dでまとめてファイルアップロード2~jQueryFileUpload for Rails

github.com/tors/jquery-fileupload-rails

github.com/blueimp/jQuery-File-Upload

ネタモト

How to use only the Basic plugin (minimal setup guide)

API

OPTION

UIのソース

RailsCasts

railscasts.com/episodes/381-jquery-file-upload?view=asciicast

Rails側の準備

詳しくは、Ruby on Rails 3.2でファイルアップロード〜CarrierWave & RMagick

Gemfile

bundle

ダミー用のScaffold

model

ついでに、ファイル名をtitleにいれるようにしておく

 

今回必要ないけどCariierwaveが使えてることを確認するための設定

_form.html.erb

imageをfile_fieldに変更

show.html.erb

画像がみえるように

index.html.erb

テーブルには画像を小さく表示

準備

index.html.erb

複数アップロードを可能にして、そのままだとRailsがうまくparamsを読めなくなるのでnameを指定

詳しくはRailsCastsの有料配信で

これを展開するとこうなっている

formでもいいらしいけど、input:fileのid「document_image」を確認しておく

Hello jQueryFileUpload !!

Gemfile

assetsにgemを追加

*assetsにいれるとどうなるか? How is the :assets group in rails 3.1 handled by bundler?

bundle

application.js

 .js.coffee

これだけで、document全体にドラッグ・アンド・ドロップでアップロードできる

また、いくつかまとめてドラッグ・アンド・ドロップしてもアップロードできるはず

ドロップゾーンを設定してみる

github.com/blueimp/jQuery-File-Upload/wiki/Options

オプションdropZoneはjQueryObjectを引数にとる デフォルトは$(document)

適当なdiv要素をつくって

cssで四角い場所を作る

それでオプションを指定する

 

これでドロップゾーンにドラッグしなければアップロードされない

2013-01-30_00h28_32

 

 

全体プログレスバーをつけてみる

github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin

ここのとおりprogressallイベントでアップロード中のファイルの状態を取ることができる

index.html.erb

適当な場所にプログレスバーを用意して(デバッグ用に5%からスタートにしてる)

cssを作る

リンク先のとおりにオプションを指定すれば

一応、プログレスバーが表示される  はず

けど、ファイルが小さい場合とかはプログレスバーが反応する前にアップロードが終わってしまう

オプションをこんなふうにしたらなめらかに動いた

最初と最後を指定して、その間をanimateでつないだだけ

2013-01-30_00h37_35

個別のファイルとjQueryオブジェクトを結びつけるには

github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin

addでOK これで個別のファイルの情報とそれを表示させたい場所を結びつけることができる

対象のデータのcontextにjQuery Objectがはいる

 

ボタンでアップロード開始するには

data.submit()をボタンに関連付ければOK

2013-01-30_00h51_17

個別のプログレスバーを表示するには

データとjQuery Objectが結びつけてあるので簡単

2013-01-30_00h59_03

 

これのもっと高機能なやつをスッキリBackboneで書きたいんだけど…

 

-jQuery, Railsで使えるGem
-, ,

執筆者:

関連記事

WindowsのRubyでxlsxファイルを生成する~axlsx

By: Roman Boed – CC BY 2.0 目次1 axlsxのインストール2 hello axlsx3 サンプル4 参考 axlsxのインストール コマンドラインからインストー …

no image

Rails3.2でテーブルの並び替えをリファクタリング~ヘルパー

環境 Rails3.2.8でテーブル並び替えのテストを作る~cucumberと正規表現 テストができたのでHelper化 目次1 現状2 helper3 index.html.erb 現状 共通部分が …

RailsにTwitter Bootstrapのフォームを設定する~simple_form

環境 RailsにTwitter Bootstrapを設定する~twitter-bootstrap-rails github.com/plataformatec/simple_form 目次1 Gem …

Rails3でテストカバレッジを計測する~simplecov,thin

    rspecなどのテストでテストがどの程度カバーしているのかを簡単に計測するsinplecovというgemをいれた 目次1 Gemfile & bundle2 spe …

RailsでECサイト構築4 確認メールを送る~spree

  spreeでは注文したときと発送したときにメールを送信できるように設定できるので、やってみた   目次1 設定2 翻訳 設定 管理画面から設定>メールシステムの設定から これで …