読者です 読者をやめる 読者になる 読者になる

jquery-fileupload-railsでドラッグアンドドロップによるファイルアップロード

jQuery Rails

ドラッグアンドドロップでファイルをアップロードする方法について調べてHTML5 FileAPIをjQueryと絡めて使うのがよさそうだなという結論に至った。
理解するのに時間かかりそうな感じ。javascriptというかイベント駆動というかそういうところ苦手すな。勉強せな
1から作るのを今回は断念してjquery-fileupload-railsを使ってみた。

jquery-fileupload-railsjQuery-File-UploadというライブラリをRails上で簡単に使えるようにした物(という認識)
ドキュメント等は基本的にjQuery-File-Uploadの方を参照すればよさそう。

ファイルアップロードする仕組みはCarrierWaveで実現していてその実装の上にドラッグアンドドロップできるように実装する。

下記内容をそれぞれ追記
Gemfile

group :assets do
  gem 'jquery-fileupload-rails'
end

app/assets/javascripts/application.js

//= require jquery-fileupload/basic

jsにドラッグアンドドロップされた時にリクエストを送りたいDOMにfileupload()

$(function() {
  $('#hoge').fileupload();
});

これで#hogeにファイルがドロップされたら通信を送るようになった。