document.addEventListener('DOMContentLoaded', function() {
// Obtener elementos del DOM
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');
// Agregar escuchadores de eventos
browseLink.addEventListener('click', () => fileInput.click());
fileInput.addEventListener('change', handleFileSelect);
// Eventos de arrastrar y soltar
['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');
}
// Manejar archivos soltados
uploadArea.addEventListener('drop', handleDrop, false);
function handleDrop(e) {
const dt = e.dataTransfer;
const files = dt.files;
handleFiles(files);
}
// Manejar selección de archivos
function handleFileSelect(e) {
const files = e.target.files;
handleFiles(files);
}
// Procesar archivos
function handleFiles(files) {
[...files].forEach(uploadFile);
}
// Cargar archivo (simulado)
function uploadFile(file) {
// Mostrar progreso
uploadProgress.style.display = 'block';
// Crear elemento de archivo
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="Eliminar">×</button>
</div>
`;
uploadedFiles.appendChild(fileItem);
// Simular progreso de carga
let progress = 0;
const interval = setInterval(() => {
progress += Math.random() * 10;
if (progress >= 100) {
progress = 100;
clearInterval(interval);
// Actualizar UI cuando se completa la carga
progressText.textContent = '¡Carga completada!';
progressFill.style.width = '100%';
// Agregar botón de descarga
const downloadBtn = document.createElement('button');
downloadBtn.className = 'file-action-btn download';
downloadBtn.title = 'Descargar';
downloadBtn.innerHTML = '↓';
fileItem.querySelector('.file-actions').appendChild(downloadBtn);
// Agregar funcionalidad de eliminación
const deleteBtn = fileItem.querySelector('.delete');
deleteBtn.addEventListener('click', () => {
fileItem.style.animation = 'fadeOut 0.3s ease';
setTimeout(() => {
fileItem.remove();
}, 300);
});
// Agregar funcionalidad de descarga
downloadBtn.addEventListener('click', () => {
alert(`Descargando \${file.name}`);
});
// Ocultar progreso después de un retraso
setTimeout(() => {
uploadProgress.style.display = 'none';
progressFill.style.width = '0%';
progressText.textContent = 'Cargando... 0%';
}, 2000);
}
progressFill.style.width = `\${progress}%`;
progressText.textContent = `Cargando... \${Math.round(progress)}%`;
}, 100);
}
// Obtener ícono de archivo basado en el tipo de archivo
function getFileIcon(file) {
const fileType = file.type.split('/')[0];
const fileExtension = file.name.split('.').pop().toLowerCase();
if (fileType === 'image') {
// Para archivos de imagen, crearíamos una vista previa en una aplicación real
return '🖼️';
} else if (fileExtension === 'pdf') {
return '📄';
} else {
return '📁';
}
}
// Formatear tamaño de archivo
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];
}
});