Mejorando la experiencia de carga de archivos con Drag & Drop en Breniapp
En el proyecto Breniapp/brenia, nos hemos enfocado recientemente en mejorar la usabilidad de nuestra biblioteca de medios, específicamente en el banco de imágenes. El objetivo era permitir que los usuarios carguen archivos mediante la acción de arrastrar y soltar (drag & drop), un estándar de la industria que agiliza significativamente el flujo de trabajo comparado con el uso tradicional del selector de archivos del sistema.
Desafío técnico
El desafío radicaba en integrar esta funcionalidad sin alterar la lógica de validación y procesamiento existente. Dado que utilizamos Livewire para gestionar la reactividad en el front-end, el objetivo era reutilizar el mismo flujo de datos utilizado por el input type="file".
Implementación basada en Livewire y Alpine.js
Para lograr esto, aprovechamos las capacidades de comunicación entre Alpine.js y Livewire. Mientras que el selector de archivos estándar dispara un evento de cambio, el área de carga (dropzone) ahora intercepta los eventos nativos del navegador (drop y dragover).
// Ejemplo simplificado de lógica de validación en Livewire
public function updatedFileUploader($value)
{
$this->validate([
'fileUploader.*' => 'image|mimes:jpg,png,webp,gif|max:5120',
]);
// Proceso de subida tras validación
$this->processImageUpload();
}
La capa de presentación maneja la validación en tiempo real. Si un usuario intenta arrastrar un archivo que no corresponde a una imagen, capturamos el evento y mostramos un mensaje de error claro en lugar de procesar el archivo, evitando errores de servidor innecesarios.
Beneficios de la actualización
- Coherencia: La lógica de subida es idéntica para ambos métodos, garantizando que el usuario obtenga el mismo resultado, ya sea arrastrando o seleccionando el archivo.
- Feedback visual: Gracias a Alpine.js, el componente responde visualmente al detectar el arrastre sobre el área designada, mejorando la intuición del usuario.
- Mantenibilidad: Al centralizar la validación en el componente de Livewire, hemos asegurado que las pruebas unitarias con PHPUnit cubran ambos casos de uso, evitando regresiones en futuras versiones.
Con esta mejora, hemos eliminado la fricción en el banco de imágenes, haciendo que la gestión de activos en la plataforma sea más fluida y profesional.
