【CSS】簡易なドロップゾーンを作るスニペット

　ドロップゾーンはファイルをドラッグアンドドロップで入力欄に入力できる仕組みのことの通称です。JavaScript では dropzone.js をはじめとして様々な dropzone ライブラリがあります。
Dropzone.js

　各ドロップゾーンライブラリは便利ですが、わざわざライブラリを入れるまでもないとか、ライブラリを使う上での制約が顧客の要望と衝突してしまったなど、でライブラリを使わない方がいいパターンもあります。そういった時に使えるシンプルなドロップゾーンの作り方を紹介します。
　実装したデモとコードが次です。

　ドロップゾーンを構成しているコードのみを抽出したのが次です。

    <div class="zone">
      <input type="file" />
      <span>ファイルをドロップするエリア</span>
    </div>

.zone {
  /* ドロップゾーンの大枠要素 */
  position: relative;
}
.zone input {
  /* ファイルをドロップする input 要素 */
  /* 親要素分まで広げる */
  position: absolute;
  height: 100%;
  width: 100%;
  /* 透明にすることで挙動は input のまま、見た目は後ろのまま */
  opacity: 0;
  /* input より後に記述される要素より前面に出る必要があるため用意 */
  z-index: 100;
}

　ドラッグアンドドロップによるファイルの入力はブラウザの組み込み機能を使います。MDN の input 要素の定義に入っていない機能ですが MicrosoftEdge, Firefox, GoogleChrome はこれが動作するのを確認し、ざっと調べた感じ Safari でも同様に動作しそうなので問題ないでしょう。この組み込み機能を使ういい感じの見た目を組めば、それでもうドロップゾーンです。
　これで input 要素のデザインを変えたのみのドロップゾーンができます。ここまで来たら、通常の input 要素の様に addEventListener なり onChange なりでファイルを操作するのみです。