73 lines
2.5 KiB
JavaScript
73 lines
2.5 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
const dropArea = document.getElementById('drop-area');
|
|
const fileInput = document.getElementById('fileInput');
|
|
const fileList = document.getElementById('file-list');
|
|
|
|
if (dropArea) {
|
|
// Prevent default drag behaviors
|
|
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
|
|
dropArea.addEventListener(eventName, preventDefaults, false);
|
|
document.body.addEventListener(eventName, preventDefaults, false);
|
|
});
|
|
|
|
// Highlight drop area when item is dragged over it
|
|
['dragenter', 'dragover'].forEach(eventName => {
|
|
dropArea.addEventListener(eventName, () => dropArea.classList.add('highlight'), false);
|
|
});
|
|
|
|
['dragleave', 'drop'].forEach(eventName => {
|
|
dropArea.addEventListener(eventName, () => dropArea.classList.remove('highlight'), false);
|
|
});
|
|
|
|
// Handle dropped files
|
|
dropArea.addEventListener('drop', handleDrop, false);
|
|
|
|
// Handle file selection via button
|
|
dropArea.addEventListener('click', () => {
|
|
fileInput.click();
|
|
});
|
|
|
|
fileInput.addEventListener('change', function() {
|
|
handleFiles(this.files);
|
|
});
|
|
|
|
function preventDefaults(e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
}
|
|
|
|
function handleDrop(e) {
|
|
let dt = e.dataTransfer;
|
|
let files = dt.files;
|
|
handleFiles(files);
|
|
}
|
|
|
|
function handleFiles(files) {
|
|
files = [...files];
|
|
files.forEach(file => {
|
|
// We only want PDF files
|
|
if (file.type === "application/pdf") {
|
|
renderFile(file);
|
|
}
|
|
});
|
|
}
|
|
|
|
function renderFile(file) {
|
|
const reader = new FileReader();
|
|
reader.readAsDataURL(file);
|
|
reader.onloadend = function() {
|
|
const fileItem = document.createElement('div');
|
|
fileItem.classList.add('file-item');
|
|
|
|
const fileSize = (file.size / 1024 / 1024).toFixed(2) + ' MB';
|
|
|
|
fileItem.innerHTML = `
|
|
<i class="bi bi-file-earmark-pdf-fill file-icon"></i>
|
|
<span class="file-name">${file.name}</span>
|
|
<span class="file-size">${fileSize}</span>
|
|
`;
|
|
fileList.appendChild(fileItem);
|
|
}
|
|
}
|
|
}
|
|
}); |