Este proyecto aborda la necesidad de implementar un sistema de subida de archivos grandes (hasta 20GB) con soporte para carpetas, cifrado, reanudación de subidas y compatibilidad multi-navegador, incluyendo IE9, en un contexto de gestión de documentos para la industria militar.

• Subida de archivos grandes: Manejo de archivos de hasta 20GB mediante fragmentación en bloques más pequeños.
• Subida de carpetas con jerarquía: Preservación de la estructura de directorios al subir carpetas, compatible con navegadores modernos e IE9 con limitaciones.
• Cifrado: Uso de AES para cifrar los fragmentos durante la trensmisión, con gestión segura de claves.
• Reanudación de subidas: Persistencia del progrseo en localStorage para evitar pérdidas al recargar o cerrar el navegador.
• Compatibilidad con IE9: Soporte mediante polyfills y detección de navegador para ofrecer alternativas.

Implementación del Frontend con Vue3 y JavaScript

El sistema se desarrolla con Vue3 y JavaScript nativo, integrando bibliotecas como CryptoJS para cifrado y técnicas de fragmentación para manejar archivos grandes.

Configuración Inicial y Detección de Navegador

Se detecta el tipo de navegador para adaptar funcionalidades, especialmente para IE9.

import { ref, onMounted } from 'vue';
import CryptoJS from 'crypto-js';

// Estado global de la aplicación
const tareasSubida = ref([]);
const esIE9 = ref(false);
const TAMANO_FRAGMENTO = 5 * 1024 * 1024; // 5MB por fragmento
const colaEspera = ref([]);
const MAX_CONCURRENCIA = 3;

// Inicialización y detección de navegador
onMounted(() => {
  esIE9.value = /*@cc_on@*/false || !!document.documentMode === 9;
});

Manejo de Subida de Archivos y Características Clave

El sistema incluye lógica para fragmentar archivos, gestionar colas de subida y manejar cifrado. A continuación, se muestra un fragmento simplificado de la funcionalidad de subida.

// Función para fragmentar y subir un archivo grande
async function subirArchivoEnFragmentos(archivo) {
  const totalFragmentos = Math.ceil(archivo.size / TAMANO_FRAGMENTO);
  let fragmentoActual = 0;

  while (fragmentoActual < totalFragmentos) {
    const inicio = fragmentoActual * TAMANO_FRAGMENTO;
    const fin = Math.min(inicio + TAMANO_FRAGMENTO, archivo.size);
    const fragmento = archivo.slice(inicio, fin);

    // Cifrado del fragmento (ejemplo simplificado)
    const fragmentoCifrado = CryptoJS.AES.encrypt(
      CryptoJS.lib.WordArray.create(await fragmento.arrayBuffer()),
      'clave-segura'
    ).toString();

    // Envío al servidor (lógica omitida)
    await enviarFragmento(fragmentoCifrado, fragmentoActual, archivo.name);
    fragmentoActual++;
  }
}

Compatibilidad con IE9 y Polyfills

Para IE9, se requieren polyfills para soporte básico. La detección de navegador permite mostrar mensajes alternativos cuando no se soportan funcionalidades modernas.

// Ejemplo de polyfills en el HTML (no es código JS, pero relevante)
// <script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script>
// <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>

Guía de Desarrollo e Implementación

Requisitos del Entorno

• Frontend: Vue3 CLI, Node.js 16+, navegadores Chrome/Firefox (IE9 requiere polyfills).
• Backend: SpringBoot 2.7+ o equivalente para manejo de fragmentos y almacenamiento.
• Servidor: Linux con Nginx para despliegue frontend.

Pasos de Instalación

1. Clonar el repositorio del proyecto.
2. Instalar dependencias del frontend con npm.
3. Configurar el backend para la recepción de fragmentos y persistencia de datos.
4. Iniciar los servicios frontend y backend.

Consideraciones Técnicas

• Fragmentación: El tamaño de fragmento recomendado es 5MB para equilibrar rendimiento y uso de memoria.
• Concurrencia: Limitar subidas simultáneas a 3 para evitar sobrecarga en el navegador.
• Cifrado: Las claves deben generarse de forma segura, por ejemplo, usando PBKDF2 a partir de contraseñas de usuario.
• Persistencia: Usar localStorage para guardar el progreso de subida y verificar fragmentos existantes en el servidor antes de reanudar.