Crear una experiencia de subida fluida con Uppy
Las subidas de archivos son un componente crucial de las aplicaciones web modernas. Este DevTip explora cómo crear una experiencia de subida eficiente y fácil de usar con Uppy, un potente cargador de archivos en JavaScript.
Introducción
Gestionar las subidas de archivos en aplicaciones web exige un equilibrio entre experiencia de usuario, rendimiento y seguridad. Uppy es un cargador de archivos modular en JavaScript que destaca en todas estas áreas y ofrece una solución robusta para gestionar las subidas de archivos en el navegador.
¿Qué herramientas son populares para gestionar las subidas en el navegador?
Uppy destaca en el ecosistema de subida de archivos por su arquitectura moderna, su amplio conjunto de funciones y su excelente experiencia para desarrolladores. Ofrece una solución integral que incluye:
- Funcionalidad de arrastrar y soltar
- Indicadores de progreso
- Capacidades de vista previa de archivos
- Compatibilidad con subidas reanudables
- Integraciones con proveedores remotos
Configurar Uppy en un entorno de navegador
Puedes instalar Uppy con npm:
npm install @uppy/core @uppy/dashboard @uppy/xhr-upload
En aplicaciones basadas en módulos, importa e inicializa Uppy de la siguiente manera:
import { Uppy } from '@uppy/core'
import Dashboard from '@uppy/dashboard'
import XHRUpload from '@uppy/xhr-upload'
import '@uppy/core/css/style.min.css'
import '@uppy/dashboard/css/style.min.css'
const uppy = new Uppy().use(Dashboard, {
inline: true,
target: '#drag-drop-area',
}).use(XHRUpload, { endpoint: '/upload', fieldName: 'file' })
Como alternativa, usa el CDN para prototipos rápidos:
<link href="https://releases.transloadit.com/uppy/v4.13.1/uppy.min.css" rel="stylesheet" />
<script type="module">
import { Uppy, Dashboard, XHRUpload } from 'https://releases.transloadit.com/uppy/v4.13.1/uppy.min.mjs'
</script>
Implementar una función básica de subida
Crea una interfaz básica de subida con Uppy:
<div id="drag-drop-area"></div>
Usa esta inicialización en lugar de la anterior para añadir manejadores de eventos. El endpoint /upload
debe aceptar solicitudes POST multipart con un campo file y devolver una respuesta JSON correcta.
XHRUpload no ofrece por sí mismo subidas reanudables ni fragmentadas; para eso usa el plugin Tus.
const uppy = new Uppy()
.use(Dashboard, {
inline: true,
target: '#drag-drop-area',
})
.use(XHRUpload, { endpoint: '/upload', fieldName: 'file' })
.on('upload-success', (file, response) => {
console.log(`${file.name} uploaded successfully`)
})
.on('upload-error', (file, error) => {
console.error(`Error uploading ${file.name}:`, error)
})
uppy.on('complete', (result) => {
console.log('Upload complete! Files:', result.successful)
})
Funciones y capacidades modernas
Uppy evoluciona continuamente para responder a las exigencias del desarrollo web moderno. Uppy 4.x introduce varias funciones potentes:
- Soporte nativo de TypeScript para mejorar la seguridad de tipos
- Integración con React Hooks para una incorporación fluida en aplicaciones React
- Un editor de imágenes integrado para ajustes sobre la marcha
- Integración con Google Photos para seleccionar archivos remotos con facilidad
- Manejo de errores mejorado y mecanismos de reintento configurables
Buenas prácticas de seguridad
Garantiza una seguridad robusta configurando tanto el cliente como el servidor para validar y proteger las subidas de archivos. En el lado del cliente, aplica restricciones para minimizar los riesgos:
uppy.setOptions({
restrictions: {
maxFileSize: 2 * 1024 * 1024, // 2MB
allowedFileTypes: ['image/*', '.pdf'],
maxNumberOfFiles: 5,
},
})
En un servidor Express existente, instala cors con npm install cors y configúralo para el origen de
tu frontend. CORS no sustituye la autenticación, la autorización ni la validación del lado del servidor.
const cors = require('cors')
app.use(
cors({
origin: 'https://your-domain.com',
methods: ['POST'],
allowedHeaders: ['Content-Type', 'Authorization'],
}),
)
La siguiente función auxiliar de JavaScript ilustra las comprobaciones de metadatos en un manejador de Express/Multer existente. Trata los tipos MIME como no confiables, valida el contenido de los archivos antes de usarlo y aplica límites de tamaño mientras se reciben los datos, no solo después de que finalice la subida:
const validateFile = (file) => {
const allowedTypes = ['image/jpeg', 'image/png', 'application/pdf']
if (!allowedTypes.includes(file.mimetype)) {
throw new Error('Invalid file type')
}
if (file.size > 2 * 1024 * 1024) {
throw new Error('File too large')
}
}
Solución de problemas comunes
Configuración de CORS
Reutiliza el middleware de CORS anterior con el origen real de tu frontend. No sustituyas el origen explícito por un comodín. CORS no es autenticación; autoriza las solicitudes de subida de forma independiente.
Errores de red
El Dashboard puede reintentar las subidas fallidas. Para un botón de reintento personalizado, invoca retryAll()
en la instancia existente dentro de su manejador de clic:
await uppy.retryAll()
Validación del tipo de archivo
Gestiona las restricciones de tipo de archivo con elegancia para informar a los usuarios de los problemas:
uppy.on('restriction-failed', (file, error) => {
console.error(error)
// Display a user-friendly error message
showErrorNotification(`${file.name}: ${error.message}`)
})
Consejos para optimizar el rendimiento
Mejora el rendimiento y la experiencia de usuario siguiendo estos consejos:
- Elige el plugin Tus y un endpoint compatible con el protocolo tus cuando los archivos grandes requieran subidas reanudables
- Implementa un manejo de errores y mecanismos de reintento adecuados
- Usa compresión cuando sea aplicable
- Monitorea el progreso de la subida y ofrece información en tiempo real
const uppy = new Uppy({
autoProceed: true,
allowMultipleUploadBatches: true,
debug: process.env.NODE_ENV === 'development',
})
uppy.on('upload-progress', (file, progress) => {
const percent = (progress.bytesUploaded / progress.bytesTotal) * 100
updateProgressBar(percent)
})
Conclusión
Uppy ofrece una solución robusta para gestionar las subidas de archivos en aplicaciones web modernas. Su amplio conjunto de funciones, sus sólidas capacidades de seguridad y su excelente experiencia para desarrolladores lo convierten en una opción ideal para integrar las subidas de archivos en tus proyectos.
Para soluciones avanzadas de procesamiento y almacenamiento de archivos, considera explorar el servicio de Subida de archivos de Transloadit y Uppy.