| |
| document.addEventListener('DOMContentLoaded', () => { |
| |
| const dropArea = document.querySelector('.border-dashed'); |
| const fileInput = document.getElementById('image-upload'); |
|
|
| ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { |
| dropArea.addEventListener(eventName, preventDefaults, false); |
| }); |
|
|
| function preventDefaults(e) { |
| e.preventDefault(); |
| e.stopPropagation(); |
| } |
|
|
| ['dragenter', 'dragover'].forEach(eventName => { |
| dropArea.addEventListener(eventName, highlight, false); |
| }); |
|
|
| ['dragleave', 'drop'].forEach(eventName => { |
| dropArea.addEventListener(eventName, unhighlight, false); |
| }); |
|
|
| function highlight() { |
| dropArea.classList.add('drag-over'); |
| } |
|
|
| function unhighlight() { |
| dropArea.classList.remove('drag-over'); |
| } |
|
|
| dropArea.addEventListener('drop', handleDrop, false); |
| dropArea.addEventListener('click', () => fileInput.click()); |
|
|
| function handleDrop(e) { |
| const dt = e.dataTransfer; |
| const files = dt.files; |
| fileInput.files = files; |
| const event = new Event('change'); |
| fileInput.dispatchEvent(event); |
| } |
|
|
| {"ok":false,"message":"terminated"} |