การลากไฟล์เข้าสู่หน้า

ไฟล์จากเดสก์ท็อป

การรับไฟล์ที่วาง

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);

รายการเทียบกับไฟล์

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());

ตรวจสอบสั้น ๆ

สรุป: การลากไฟล์เข้ามา