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

執筆者:

関連記事

no image

Railsで動画を管理する2 動画のサムネイルを作成する~CarrierWave + Flowplayer

  *とりあえず動いているけど、もっとましな方法があるとおもいます 前提 Railsで動画ファイルを管理する~CarrierWave Flowplayer 参考 Rubyでffmpegのラッ …

WindowsのRubyでxlsxファイルにアクセスする~roo

By: Hajime NAKANO – CC BY 2.0 目次1 rooのインストール2 rooを使ってみる(基本)3 シートを指定する4 セルの値を確認する5 行列を数える rooのイ …

no image

Rails3.2.8で自動テスト環境を整える〜cucumber+spork+guard

環境 ruby 1.9.3 & rails 3.2.8 参考 cucumber + spork + guard + factory_girl あってもよいが[crayon-5c715da6c8 …

気になるBackbone.jsのプラグインとTips

  By: Francisco Gonzalez 随時更新中 目次1 気になるBackbone.jsのプラグイン2 チュートリアル3 Tips4 気になるjQueryのプラグイン 気になるB …

no image

Rails3.2でリアルタイムメッセージングサービスをherokuにデプロイしたよ〜private_pub,Faye

参考 Rails3.2でリアルタイムメッセージング~Private_pub、Faye さっそくherokuにあげてみた ブラウザを2つ起動して並べてみれば投稿した内容が即時にほかのブラウザに反映するの …