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

執筆者:

関連記事

RailsでECサイトを構築3 日本にあわせる~spree

  前提 RailsでECサイト構築~spree RailsでECサイト構築2 注文してみる~spree 目次1 テンプレートをダウンロード2 テンプレートを改造する3 デフォルトの国を変更 …

Rails3.2でよくあるデータ構造を追加してくれる系のGemのメモ〜タグ付け、評価システム、バージョン、論理削除、木構造とか

By: Jeff Dlouhy – CC BY 2.0 よくある構造というかよくあるスキーマを追加してくれるModelに一言書いておくだけで便利なGemをメモ(未検証)   目次 …

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

  前提 Rails3でajaxでD&Dでまとめてファイルアップロード~jQueryFileUpload for Rails Ruby on Rails 3.2でファイルアップロード …

Rails3でECサイト構築8 都道府県の登録~spree

  都道府県の登録を忘れていた seedを追っていくとわかるのだけど、rake db:load_file[tablename.yml, dir]で登録できる サンプルは、spree_core …

no image

位置情報通知の使いみちアイデアメモ

    ここまでHTML5とGoogle Mapsを使った位置情報通知を試してきたけど、その使いみちについてメモしておきたい 目次1 カレログ的なサービス2 宝探し的なイベント3 …