みかづきブログ・カスタム

基本的にはちょちょいのほいです。

ドラッグ&ドロップでファイルをアップロードする(HTML Drag and Drop API無しバージョン) 📦

f:id:kimizuka:20200809114506p:plain

ウェブサイトにファイルをアップロードする際、ファイルをドラッグ&ドロップするUIをよく見かけます。
そういったUIを実装しようとすると、HTML Drag and Drop APIを使いたくなることでしょう。

developer.mozilla.org

しかし、実は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からファイルをアップロードすることもできます。


DEMO

develop.kimizuka.org

ファイルをドラッグ&ドロップすると、ファイルの情報がコンソールに表示されます。