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

執筆者:

関連記事

Rails3.2でhtml5で取得した位置情報をAjaxで住所表示する~geocoder

    HTML5ではブラウザからユーザーのPCの位置情報を取得することができるGeoLocation APIというものがある (もちろんデフォルトではユーザーに確認をする設定にな …

div要素全体をクリッカブルにしてリンクする~CSS

By: James Lee   WordPressのテーマを少しいじった ブロック要素の全体をリンク領域に設定する なにか別のもっと簡単な方法がCSS3であった気もするけど、とりあえず動いて …

no image

RubyからHyper Estraierを使う1~search_do

環境:Ruby 1.9.3 & Rails 3.2.7 参考リンク github.com/grosser/search_do Getting started with acts_as_sear …

多対多の関係でまだ関連を持っていない候補を探す〜active_record、pluck、not in

By: Kevin Dooley – CC BY 2.0 目次1 前提2 やりたいこと3 解4 解説 前提 PersonとProjectは、ProjectsPersonという中間モデル(テ …

Rails3.2でユーザー管理機能を追加~Devise

  前回 Rails3.2のアプリにユーザー機能を追加する~Devise サインアップ機能を削除したので、Railsからのユーザー管理機能を追加した 目次1 generate2 routes …