See the Pen
vue.js(bootstrap-vue) File Upload by Tenderfeel (@Tenderfeel)
on CodePen.
なんでか初回はonchangeが反応しない挙動があった。
プレビュー表示ならwatchでv-model監視する手もあるな🤔と思った。
draganddropの判別にmodernizr使おうとしたら存在しなかったんだけど消えたんですかね。
ないものは仕方ないからisMobileでPCだけドラッグドロップUIになるようにしてます。
中身はDrag&Drop + File API なので何番煎じなんだか分からないけれども…
複数の画像を一括でDataURLに変換するのと、
画像タグを生成してくれるものが無かったので自分で作った。
スタイリングはBootstrapです。
MooToolsで未定義の新しいイベントを使う時には
Element.NativeEventsで設定するとaddEventとかで使えるようになります。
Element.NativeEvents['drop'] = 2; Element.NativeEvents['dragover'] = 2; Element.NativeEvents['dragleave'] = 2;