سحب الملفات إلى الصفحة

الملفات من سطح المكتب

قبول إفلات الملفات

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

تحقق سريع

مراجعة: سحب الملفات إلى الصفحة