【JavaScript】画像をドラッグ＆ドロップで読み込む方法｜ドロップゾーン・プレビュー・アップロード

<div id="dropzone">ここに画像をドロップ</div>
<div id="preview"></div>

const dropzone = document.getElementById("dropzone");

// ★これが必須。dragover で preventDefault しないと drop が発火しない
dropzone.addEventListener("dragover", (e) => {
  e.preventDefault();
});

dropzone.addEventListener("drop", (e) => {
  e.preventDefault(); // ブラウザが画像を開くのを防ぐ
  const files = [...e.dataTransfer.files]; // ドロップされたファイル一覧
  console.log(files); // File オブジェクトの配列
});

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

  const files = [...e.dataTransfer.files];
  // MIMEタイプが image/ で始まるものだけ
  const images = files.filter((file) => file.type.startsWith("image/"));

  if (images.length === 0) {
    console.log("画像ファイルではありません");
    return;
  }
  images.forEach(showPreview); // 次のプレビュー関数へ
});

const preview = document.getElementById("preview");

function showPreview(file) {
  const img = document.createElement("img");
  img.src = URL.createObjectURL(file); // ファイルから一時URLを生成
  img.style.maxWidth = "200px";

  // 表示後にメモリを解放する
  img.onload = () => URL.revokeObjectURL(img.src);

  preview.appendChild(img);
}

function showPreviewWithReader(file) {
  const reader = new FileReader();
  reader.onload = (e) => {
    const img = document.createElement("img");
    img.src = e.target.result; // data URL（base64）
    preview.appendChild(img);
  };
  reader.readAsDataURL(file);
}

dropzone.addEventListener("dragenter", (e) => {
  e.preventDefault();
  dropzone.classList.add("dragover");
});
dropzone.addEventListener("dragover", (e) => e.preventDefault());
dropzone.addEventListener("dragleave", () => {
  dropzone.classList.remove("dragover");
});

dropzone.addEventListener("drop", (e) => {
  e.preventDefault();
  dropzone.classList.remove("dragover");

  // 複数ファイルをまとめて処理
  [...e.dataTransfer.files]
    .filter((f) => f.type.startsWith("image/"))
    .forEach(showPreview);
});

#dropzone {
  border: 2px dashed #94a3b8;
  padding: 2em;
  text-align: center;
}
#dropzone.dragover {
  border-color: #0284c7;
  background: #f0f9ff;
}

function isValidImage(file, maxMB = 5) {
  const allowedTypes = ["image/jpeg", "image/png", "image/gif", "image/webp"];
  const okType = allowedTypes.includes(file.type);
  const okSize = file.size <= maxMB * 1024 * 1024;

  if (!okType) console.log("対応していない形式です:", file.type);
  if (!okSize) console.log("ファイルが大きすぎます:", file.size);

  return okType && okSize;
}

// 使用例：検証を通った画像だけプレビュー
[...e.dataTransfer.files].filter(isValidImage).forEach(showPreview);

async function uploadImage(file) {
  const formData = new FormData();
  formData.append("image", file);

  const res = await fetch("/upload", {
    method: "POST",
    body: formData, // Content-Type は自動設定される
  });
  return res.json();
}