【JSなし】ドラッグ&ドロップでファイルをアップロードする

ファイルアップロード時のドラッグ&ドロップ機能を実装する際、HTML Drag and Drop APIを利用することが多いが、JSなしでそれを実現したい。

解決法

<div>
  ここに画像をドラッグ&ドロップ
  <input type="file" />
</div>

div {
  position: relative;
  height: 200px;
}

input {
  position: absolute;
  inset: 0;
  opacity: 0;
}

そもそもinput[type="file"]にドラッグ&ドロップすることが可能なので、CSSで<input>を透明にし、親要素いっぱいに広げるだけで実現できた¹。

もちろんその領域をクリックすることでファイル選択もできる。