ページへファイルをドラッグする

デスクトップからのファイル

ファイルのドロップを受け付ける

dropzone.addEventListener("dragover", (e) => e.preventDefault());

dataTransfer.files

dropzone.addEventListener("drop", (e) => {
  e.preventDefault();
  const files = e.dataTransfer.files;
  console.log(files.length, "file(s) dropped");
});

ファイルを反復処理する

const files = [...e.dataTransfer.files];
files.forEach((file) => {
  console.log(file.name, file.size, file.type);
});

ファイルのメタデータ

console.log(file.name);          // "photo.png"
console.log(file.type);          // "image/png"
console.log(file.size);          // 20481

種類でフィルタリングする

const images = files.filter((f) => f.type.startsWith("image/"));
if (images.length === 0) console.log("No images dropped");

ファイルの内容を読み取る

const reader = new FileReader();
reader.onload = () => console.log(reader.result);
reader.readAsText(file);

ドロップされた画像をプレビューする

const url = URL.createObjectURL(file);
img.src = url;
img.onload = () => URL.revokeObjectURL(url);

items と files

for (const item of e.dataTransfer.items) {
  if (item.kind === "file") {
    const file = item.getAsFile();
    console.log(file.name);
  }
}

ドロップされたファイルをアップロードする

const form = new FormData();
files.forEach((f) => form.append("files", f));
fetch("/upload", { method: "POST", body: form });

意図しないナビゲーションを防ぐ

window.addEventListener("dragover", (e) => e.preventDefault());
window.addEventListener("drop", (e) => e.preventDefault());

クイックチェック

まとめ: ファイルのドラッグ＆ドロップ