สร้าง Full Page Drag and Drop สำหรับอัปโหลดไฟล์ด้วย HTML5 JavaScript

บทนำ

Drag and Drop API ของ HTML5 ช่วยให้สร้างพื้นที่วางไฟล์ (Drop Zone) ขนาดเต็มหน้าจอได้ โดยใช้ event ต่างๆ ของ Drag and Drop API

โค้ดตัวอย่าง

// HTML
<div id="dropZone" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:9999; text-align:center; padding-top:20%; color:white; font-size:2em;">
  วางไฟล์ที่นี่...
</div>

<script>
var myDrop = document.getElementById('dropZone');

function displayDropZone() {
  myDrop.style.visibility = "visible";
}

function hideDropZone() {
  myDrop.style.visibility = "hidden";
}

function allowDrag(ev) {
  ev.dataTransfer.dropEffect = 'copy';
  ev.preventDefault();
}

function handleDrop(ev) {
  ev.preventDefault();
  hideDropZone();
  
  // จัดการไฟล์ที่วาง
  var files = ev.dataTransfer.files;
  for (var i = 0; i < files.length; i++) {
    console.log('File:', files[i].name, files[i].type, files[i].size);
    // อัปโหลดไฟล์ที่นี่ (ใช้ FormData + fetch/XHR)
  }
  
  alert('ไฟล์ถูกวางแล้ว! จำนวน: ' + files.length + ' ไฟล์');
}

// Event Listeners
window.addEventListener('dragenter', function(ev) {
  displayDropZone();
});

myDrop.addEventListener('dragenter', allowDrag);
myDrop.addEventListener('dragover', allowDrag);
myDrop.addEventListener('dragleave', function(e) {
  hideDropZone();
});
myDrop.addEventListener('drop', handleDrop);
</script>

คำอธิบาย Events

การอัปโหลดไฟล์จริง (Complete Upload)

function handleDrop(ev) {
  ev.preventDefault();
  hideDropZone();
  
  var files = ev.dataTransfer.files;
  var formData = new FormData();
  
  for (var i = 0; i < files.length; i++) {
    formData.append('files[]', files[i]);
  }
  
  fetch('/upload', {
    method: 'POST',
    body: formData
  })
  .then(response => response.json())
  .then(data => {
    console.log('Upload success:', data);
    alert('อัปโหลดสำเร็จ!');
  })
  .catch(error => {
    console.error('Upload failed:', error);
    alert('อัปโหลดล้มเหลว');
  });
}

CSS สำหรับ Drop Zone สวยงาม

#dropZone {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 123, 255, 0.1);
  border: 3px dashed #007bff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

#dropZone.active {
  opacity: 1;
  visibility: visible;
}

#dropZone.drag-over {
  background: rgba(0, 123, 255, 0.3);
  border-color: #0056b3;
}

การปรับปรุงจากโค้ดต้นฉบับ

• เพิ่ม CSS สำหรับ UI ที่สวยงาม
• เพิ่มการอัปโหลดไฟล์จริงด้วย fetch API
• จัดการ multiple files
• เพิ่ม transition animation
• ใช้ class แทน inline style