จดจำและ Repopulate File Input ใน HTML5 ด้วย Drag and Drop

ใช้ Drag and Drop API กับ File Input

ก่อนหน้านี้ไม่สามารถตั้งค่า <input type="file"> ได้ แต่ตอนนี้สามารถทำได้ผ่าน DataTransfer

จัดการ Drop Event

function drop(ev) {
    ev.stopPropagation();
    ev.preventDefault();
    var d = ev.dataTransfer;
    var files = d.files;
    handleFiles(files);
}

Drag Over / Leave / Drop Handlers

target.addEventListener('dragover', (ev) => {
    ev.preventDefault();
    body.classList.add('dragging');
});
target.addEventListener('dragleave', () => {
    body.classList.remove('dragging');
});
target.addEventListener('drop', (ev) => {
    ev.preventDefault();
    body.classList.remove('dragging');
    // ev.dataTransfer.files มีไฟล์ที่ลากมา
});

วิธีนี้ช่วยให้ผู้ใช้ลากไฟล์มาไว้ในพื้นที่ที่กำหนด แล้วนำไฟล์เหล่านั้นไปประมวลผลได้