vimtaku blog

TL;DR

Rails のフォームで、画像をドラッグ・アンド・ドロップでプレビューしてファイルをアップロードしたい欲求があった。
ezdz というのがあって、それで自分の欲求が満たせましたという話。
(jQuery 依存です)

背景

Rails のフォームを生成していて、画像をドラッグ・アンド・ドロップでプレビューしてファイルをアップロードしたい欲求があった。
(ただし、ここでは単一ファイルのアップロードを前提とする)。
いろいろ調べてみると Dropzone.js というのが結構便利そうだったし、今回は jQuery に依存していたので
これでやってみようとしらべてみた。 dropzone-rails というプラグインがあってすぐに rails に組み込めて楽そうだった。

dropzone-rails をつかってかんじたつらみ

1. 新規作成時には entity は保存されていないので、entity を保存してから update するような設計にしないとうまく作りにくい。
   • 理由は基本的に xhr でデータを送信するから。
   • autoprocessQueue を false にすれば、画像を D&D したときにそうしないようにできる。結局 Dropzone のインスタンスの processQueue をコールしないといけない。
   • entity がすでに作成されていたら それに対して update をかけるだけでよいのでそういうやり方でいけるならそれでよし。
   • もしそれがいやなら temp みたいなよくわからない entity に作成したあとに その uuid を form に埋め込んでサーバで保存するみたいな回りくどいことをしなければいけない気がする
2. 上記の xhr でデータを送信するところに rails との致命的な相性の悪さがある(のはもうわかっているとおもうが)。
   • model の validation に引っかかったときなどのハンドリングを js 側に持ってこなければいけない
   • すなわち rails の view で頑張ったエラーなどに合わせたりという謎の努力が必要になる。
3. そもそもそんなにがんばりたくない
   • dropzone-rails の js の client のソースコードを結局追って修正したりを繰り返さないとおもったことができなかった

代替え案を探すことに

そもそも自分がやりたいのは

• xhr じゃなくてよし
• いったん1ファイルでよし
• 画像をプレビューしたい
• jQuery は使用可能(bootstrap4 があるから)

だったので、それっぽい代替を探していたら ezdz を見つけた。
demo をみたらそれっぽかったし、 rails の binding もあったので必要十分だった。

所感

active storage でもプレビューできるみたいなのがあったのでそういうのを調べても良かったんだけど、
まだ rails5 に至ってないひとはもしかしたら上記が有効かもしれません。