ウェブサイトにファイルをアップロードする際、ファイルをドラッグ&ドロップするUIをよく見かけます。
そういったUIを実装しようとすると、HTML Drag and Drop APIを使いたくなることでしょう。
しかし、実はinputタグでも簡単に作成することができます。
何故ならば、type="file"のinputタグにはファイルをドラッグ&ドロップできるからです。
ソースコード
HTML
<div class="uploader"> <input type="file" name="file" /> </div>
CSS
.uploader { position: relative; border-radius: 8px; width: 320px; height: 180px; background: #212121; overflow: hidden; } .uploader:before { display: flex; align-items: center; justify-content: center; position: absolute; top: 24px; bottom: 24px; left: 24px; right: 24px; border: dashed 2px #fafafa; color: #fafafa; font-size: 14px; content: 'drag and drop your file here'; pointer-events: none; } .uploader input { display: block; position: absolute; top: 0; left: 0; width: 999px; height: 999px; font-size: 999px; opacity: 0; }
JavaScript
document.querySelector('input').addEventListener('change', (evt) => { console.log(evt.target.files[0]); });
解説
このコードのポイントは、超巨大な透明なinputタグをUIの中に表示することです。
inputタグなので、ドラッグ&ドロップだけではなく、クリックすればUIからファイルをアップロードすることもできます。