document.addEventListener('DOMContentLoaded', function() {
// Get DOM elements
const uploadArea = document.getElementById('uploadArea');
const fileInput = document.getElementById('fileInput');
const browseLink = document.getElementById('browseLink');
const uploadProgress = document.getElementById('uploadProgress');
const progressFill = document.getElementById('progressFill');
const progressText = document.getElementById('progressText');
const uploadedFiles = document.getElementById('uploadedFiles');
// Add event listeners
browseLink.addEventListener('click', () => fileInput.click());
fileInput.addEventListener('change', handleFileSelect);
// Drag and drop events
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
uploadArea.addEventListener(eventName, preventDefaults, false);
});
function preventDefaults(e) {
e.preventDefault();
e.stopPropagation();
}
['dragenter', 'dragover'].forEach(eventName => {
uploadArea.addEventListener(eventName, highlight, false);
});
['dragleave', 'drop'].forEach(eventName => {
uploadArea.addEventListener(eventName, unhighlight, false);
});
function highlight() {
uploadArea.classList.add('dragover');
}
function unhighlight() {
uploadArea.classList.remove('dragover');
}
// Handle dropped files
uploadArea.addEventListener('drop', handleDrop, false);
function handleDrop(e) {
const dt = e.dataTransfer;
const files = dt.files;
handleFiles(files);
}
// Handle file selection
function handleFileSelect(e) {
const files = e.target.files;
handleFiles(files);
}
// Process files
function handleFiles(files) {
[...files].forEach(uploadFile);
}
// Upload file (simulated)
function uploadFile(file) {
// Show progress
uploadProgress.style.display = 'block';
// Create file item
const fileItem = document.createElement('div');
fileItem.className = 'file-item';
fileItem.innerHTML = `
<div class="file-preview">
\${getFileIcon(file)}
</div>
<div class="file-info">
<div class="file-name">\${file.name}</div>
<div class="file-size">\${formatFileSize(file.size)}</div>
</div>
<div class="file-actions">
<button class="file-action-btn delete" title="Delete">×</button>
</div>
`;
uploadedFiles.appendChild(fileItem);
// Simulate upload progress
let progress = 0;
const interval = setInterval(() => {
progress += Math.random() * 10;
if (progress >= 100) {
progress = 100;
clearInterval(interval);
// Update UI when upload completes
progressText.textContent = 'Upload complete!';
progressFill.style.width = '100%';
// Add download button
const downloadBtn = document.createElement('button');
downloadBtn.className = 'file-action-btn download';
downloadBtn.title = 'Download';
downloadBtn.innerHTML = '↓';
fileItem.querySelector('.file-actions').appendChild(downloadBtn);
// Add delete functionality
const deleteBtn = fileItem.querySelector('.delete');
deleteBtn.addEventListener('click', () => {
fileItem.style.animation = 'fadeOut 0.3s ease';
setTimeout(() => {
fileItem.remove();
}, 300);
});
// Add download functionality
downloadBtn.addEventListener('click', () => {
alert(`Downloading \${file.name}`);
});
// Hide progress after delay
setTimeout(() => {
uploadProgress.style.display = 'none';
progressFill.style.width = '0%';
progressText.textContent = 'Uploading... 0%';
}, 2000);
}
progressFill.style.width = `\${progress}%`;
progressText.textContent = `Uploading... \${Math.round(progress)}%`;
}, 100);
}
// Get file icon based on file type
function getFileIcon(file) {
const fileType = file.type.split('/')[0];
const fileExtension = file.name.split('.').pop().toLowerCase();
if (fileType === 'image') {
// For image files, we would create a preview in a real app
return '🖼️';
} else if (fileExtension === 'pdf') {
return '📄';
} else {
return '📁';
}
}
// Format file size
function formatFileSize(bytes) {
if (bytes === 0) return '0 Bytes';
const k = 1024;
const sizes = ['Bytes', 'KB', 'MB', 'GB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}
});