32 lines
924 B
JavaScript
32 lines
924 B
JavaScript
const dropArea = document.getElementById("drop-area");
|
|
const fileInput = document.getElementById("file-input");
|
|
|
|
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
|
|
dropArea.addEventListener(eventName, e => e.preventDefault());
|
|
dropArea.addEventListener(eventName, e => e.stopPropagation());
|
|
});
|
|
|
|
['dragenter', 'dragover'].forEach(eventName => {
|
|
dropArea.addEventListener(eventName, () => dropArea.classList.add('highlight'));
|
|
});
|
|
|
|
['dragleave', 'drop'].forEach(eventName => {
|
|
dropArea.addEventListener(eventName, () => dropArea.classList.remove('highlight'));
|
|
});
|
|
|
|
|
|
dropArea.addEventListener('click', () => fileInput.click());
|
|
|
|
dropArea.addEventListener('drop', e => {
|
|
const files = e.dataTransfer.files;
|
|
handleFiles(files);
|
|
});
|
|
|
|
fileInput.addEventListener('change', e => {
|
|
handleFiles(e.target.files);
|
|
});
|
|
|
|
function handleFiles(files) {
|
|
console.log("file dropped");
|
|
}
|