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にTwitter Bootstrapを設定する~twitter-bootstrap-rails

環境 ruby 1.9.3  & rails 3.2.8 適当なscaffoldを作っておく

  github.co …

Railsでajaxなテーブルを使う~datatables

    github.com/rweng/jquery-datatables-rails 目次1 Gemfile2 application.js3 application.css4 …

no image

Mongoidのandとorで悩み中

and

or

  orの方はハッシュで[crayon-59 …

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

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

no image

railsでdocxを生成する動画

  知り合いに試しに使ってもらうのに動画を作成しました