Los campos de subida de archivos parecen simples. Un botón que dice "Elegir archivo" y un formulario que envía los datos. Pero las subidas de archivos son momentos delicados. La persona te confía su currículum, su documento de impuestos, la foto de su producto. Si la subida resulta poco clara, torpe o parece haber fallado, abandonará el formulario. Si no sabe qué tipos de archivo aceptas o qué tamaño puede tener, perderá tiempo subiendo el archivo equivocado solo para que le digan que falló. Si la subida parece insegura, dudará de que tu sitio sea de fiar. Este artículo explica qué hace que funcionen los campos de subida de archivos, cómo proteger al usuario y a tu sitio, y qué hacen mal la mayoría de los formularios y evita que la gente llegue hasta el final.
Un campo de subida de archivos hace más que aceptar archivos. Recoge información sobre permisos. Una persona que sube un currículum dice "aquí está mi información, úsala para la contratación". Una persona que sube un documento dice "confío en ti con esto". El campo de subida debe comunicar con claridad qué harás con el archivo, por qué lo necesitas y que es seguro subirlo.
Por qué las subidas de archivos son distintas de otros campos de formulario
Un campo de texto acepta palabras. Un campo de email acepta una dirección de correo. Un campo de subida de archivos acepta archivos de cualquier tamaño, tipo y origen. Esto hace que las subidas de archivos sean fundamentalmente distintas de otros campos en tres aspectos.
Primero, las subidas de archivos conllevan riesgo de seguridad. Un archivo malicioso subido a tu servidor puede dañar tu sitio, robar datos o infectar los dispositivos de tus visitantes. Los campos de texto y de email tienen límites claros. Las subidas de archivos no. Alguien podría subir un ejecutable disfrazado, un script o malware. Esto significa que debes validar y protegerte frente a cada subida que llegue.
Segundo, las subidas de archivos requieren un contexto claro. Una persona necesita saber qué archivo subir antes de empezar a buscarlo en su ordenador. Un campo de email se explica solo. Un campo de subida de archivos necesita decir "Sube tu currículum en formato PDF o de texto, máximo 5 MB". Sin esa claridad, la gente pasará minutos buscando un archivo solo para descubrir que tiene el formato equivocado o es demasiado grande.
Tercero, las subidas de archivos son lentas. Subir un archivo de 10 MB en un móvil con 4G lleva tiempo. La persona espera. Necesita saber que la subida está en marcha y que no se ha atascado ni congelado. Un estado de carga y un indicador de progreso son esenciales.
El campo de subida y cómo etiquetarlo
El campo de subida es el botón en el que la gente hace clic para seleccionar un archivo. El texto del botón importa. Debe decir qué pasa a continuación.
"Elegir archivo" es vago. "Buscar archivos" es mejor. "Sube tu currículum" es lo mejor. El texto del botón debe nombrar el archivo concreto que quieres. Así la persona sabe exactamente qué buscar en su ordenador.
La etiqueta encima del botón debe repetir el requisito. "Currículum (PDF o documento de texto, máx. 5 MB)". Pon el límite de tamaño y los formatos aceptados justo debajo de la etiqueta. No escondas esta información bajo un icono de ayuda ni en texto gris pequeño. La gente debe verla al instante o no sabrá qué subir.
Si tu formulario acepta varios archivos, el botón debe decir "Añadir archivos" o "Subir varios archivos". Un campo de subida de un solo archivo que de repente acepta dos confunde a la gente. Sé explícito.
Si la subida es opcional, dilo. "Portafolio (opcional, JPG o PNG, máx. 20 MB por imagen)". Si la subida es obligatoria, la etiqueta debe decir "obligatorio" o llevar un asterisco. No des por hecho que la gente lo entiende.
Tipos de archivo aceptados y cómo comunicarlos con claridad
No puedes aceptar todos los tipos de archivo. Tu formulario de currículums no necesita fotos JPEG. Tu formulario de documentos no necesita archivos de vídeo. Debes especificar exactamente qué tipos de archivo aceptas.
No uses jerga técnica. No digas "tipos MIME" ni "extensiones de archivo". Di "PDF, documentos de texto o exportaciones de Google Docs". Di "fotos JPG o PNG". Di "hojas de cálculo". Usa los nombres que la gente entiende.
Cuando una persona sube un archivo en un formato equivocado, el error debe ser específico. No "Tipo de archivo no válido". En su lugar, "Este formulario acepta documentos PDF o de texto. Convierte tu archivo e inténtalo de nuevo". Dile qué salió mal y qué hacer al respecto.
Si tu formulario necesita varios tipos de archivo para distintos campos, deja clara cada uno. Una solicitud de empleo puede pedir un currículum en PDF y una carta de presentación en formato de texto. Cada campo debe tener su propio botón y sus propios tipos aceptados. No hagas que la gente adivine qué archivo va dónde.
Haz una lista blanca de tipos de archivo, nunca una lista negra. No digas "todos los tipos de archivo excepto los ejecutables". En su lugar, di exactamente qué tipos se permiten. Una lista blanca es más simple para los usuarios y más sólida para la seguridad.
Límites de tamaño de archivo y cómo gestionarlos
Todo campo de subida de archivos necesita un tamaño máximo. Sin uno, alguien podría subir un vídeo de 500 MB por accidente, y tu servidor podría caerse o quedarse sin almacenamiento.
El límite de tamaño debe ajustarse a lo que la gente usa de verdad. Un currículum suele pesar de 1 a 3 MB. Fija tu límite en 10 MB para dejar margen. Una foto de perfil pesa de 2 a 5 MB. Fija tu límite en 20 MB. Un clip de vídeo puede pesar de 50 MB a 500 MB. Fija tu límite según lo que de verdad necesitas.
Di a la gente el límite de tamaño antes de que suban nada. "El tamaño máximo de archivo es 5 MB". Ponlo justo al lado del botón. Si alguien sube un archivo demasiado grande, el error debe ser inmediato y claro. No una rueda que gira 30 segundos y luego falla. Muestra el error en cuanto se selecciona el archivo, antes de que empiece la subida.
Si admites archivos grandes, considera permitir subidas por lotes o subidas reanudables. Si el archivo de 100 MB de alguien falla a mitad, la subida reanudable le permite continuar desde donde se detuvo en lugar de empezar de cero. Esto evita la frustración en conexiones lentas.
Arrastrar y soltar y varios métodos de selección
Los campos de subida de archivos deben admitir varias formas de seleccionar archivos. Algunas personas hacen clic en el botón. Otras arrastran archivos desde el escritorio. Otras buscan en la fototeca de su teléfono. Debes admitirlas todas.
El botón es el método principal. Abre el explorador de archivos nativo, que funciona en cualquier dispositivo y navegador.
Arrastrar y soltar es el método secundario. Una persona debería poder arrastrar un archivo desde su escritorio y soltarlo en el área de subida. Resulta más rápido e intuitivo que hacer clic en un botón y esperar a que se abra el explorador de archivos. Muestra un indicador visual claro cuando alguien arrastra un archivo sobre la zona de suelta. El área debe resaltarse, cambiar de color o mostrar un borde discontinuo. Así la gente sabe que puede soltar el archivo ahí.
En el móvil, la selección de archivos funciona distinto. Una persona toca el botón y elige entre su fototeca, su app de archivos o hacer una foto nueva. Admite lo que funcione en su dispositivo. No limites a los usuarios de móvil a solo hacer clic.
Si tu formulario acepta varios archivos, permite tanto la selección en bloque como añadir archivos de uno en uno. Deja que la gente seleccione cinco archivos a la vez desde el explorador de archivos. Y que luego pueda añadir uno más. No obligues a que toda la selección ocurra en una sola ventana del navegador.
Mostrar lo que se subió y quitar archivos
Cuando alguien selecciona un archivo, muéstrale exactamente qué subió. Muestra el nombre del archivo, su tamaño y un pequeño icono con el tipo de archivo. Así confirma que subió el archivo correcto.
Si el formulario acepta varios archivos, muéstralos todos en una lista. Deja que la gente vea lo que va a enviar. Si subió el archivo equivocado, deja que lo quite y suba otro antes de enviar el formulario.
El botón de quitar debe decir "Quitar" o llevar un icono X. Al hacer clic debe eliminar ese archivo de la lista de subida. No debe borrar el archivo de su ordenador, solo del formulario.
Si alguien necesita reemplazar un archivo, no le hagas quitarlo y volver a subirlo. Deja que haga clic en el botón de quitar y luego en el de subir otra vez en un solo flujo. O permite hacer clic en el archivo para abrir el explorador y seleccionar un archivo de reemplazo en el mismo sitio. Menos pasos significan mayores tasas de finalización.
Indicador de progreso y qué mostrar durante la subida
Las subidas de archivos llevan tiempo. Durante ese tiempo, la persona espera y se pregunta si está pasando algo. Debes mostrarle el progreso.
Una barra de progreso es la opción más clara. Muestra un porcentaje completado. 25%. 50%. 75%. Completo. Una persona puede verla moverse y saber que la subida está en marcha. Una barra de progreso que salta de 0% a 100% al instante no ayuda. Muestra un progreso fluido.
Si no puedes mostrar el porcentaje exacto, muestra una rueda de carga o una animación. Algo que se mueva y muestre actividad. No muestres un estado de carga estático sin movimiento. Un estado estático parece congelado.
Nunca dejes el botón de enviar pulsable mientras se sube un archivo. Ponlo en gris o desactívalo. No dejes que la gente haga clic en enviar varias veces mientras se sube un archivo. Esto puede causar subidas duplicadas o errores.
Si la subida tarda más de tres segundos, muestra una estimación del tiempo restante. "Subiendo. Quedan unos 30 segundos." o "Subiendo. Archivo grande." No hagas que la gente se pregunte cuánto falta.
Gestión de errores y por qué los errores vagos pierden envíos
Los errores de subida ocurren. Un archivo está dañado. Se cae la conexión de red. Un archivo es demasiado grande. Se subió un formato no admitido. Cuando ocurre un error, tu mensaje determina si la persona lo arregla o abandona el formulario.
Un error vago como "La subida falló. Inténtalo de nuevo." no dice nada. Intentar qué de nuevo. Qué salió mal. Está dañado el archivo. Falla la red. Es incorrecto el tipo de archivo. Los errores vagos hacen sentir impotente a la gente.
Un error específico nombra el problema. "Este archivo es demasiado grande. Tu archivo pesa 25 MB. El máximo es 10 MB. Comprímelo o elige un archivo más pequeño." "Este formato de archivo no se admite. Este formulario solo acepta documentos PDF y de texto. Convierte tu archivo a PDF e inténtalo de nuevo."
Muestra el error en un lugar claro. No escondido en texto gris al final del formulario. Usa un fondo rojo, un borde rojo o un icono rojo. Llama la atención para que vean el error de inmediato.
No borres el archivo de la lista de subida cuando ocurra un error. Déjalo visible para que sepan qué archivo tuvo el problema. Deja que lo arreglen en el sitio o lo reemplacen.
Seguridad y protección del usuario y del sitio
Las subidas de archivos son un punto débil de seguridad. Una persona que sube un archivo con código oculto podría dañar tu servidor. Un sistema de subida deficiente podría exponer el archivo a otros usuarios o a atacantes.
El primer paso de seguridad es validar el tipo de archivo. No te fíes de la extensión. Un archivo llamado "curriculum.pdf" podría contener código ejecutable. Comprueba el contenido del archivo, no solo el nombre. Esto se llama validación de tipo MIME. El servidor lee el contenido real del archivo y confirma que de verdad es un PDF, de verdad es una imagen, lo que esperes.
El segundo paso es renombrar el archivo tras la subida. No guardes los archivos con los nombres que les dieron los usuarios. Renómbralos automáticamente. "curriculum.pdf" pasa a ser "upload-a4f9e2k1.pdf" en tu servidor. Esto evita que alguien adivine la ruta del archivo y acceda directamente a él, o intente ejecutar código subiendo un archivo con un nombre concreto.
El tercer paso es guardar los archivos fuera del directorio web. No pongas los archivos subidos en una carpeta accesible directamente desde internet. Guárdalos aparte. Cuando alguien necesite descargar su archivo, envíalo mediante un enlace seguro que caduque, no una URL directa a la ruta del archivo.
El cuarto paso es fijar el tamaño máximo de archivo y los límites de subida. Limita el tamaño total de cada archivo. Limita el número de archivos que alguien puede subir. Limita cuántas subidas puede hacer una sola persona en una hora. Estos límites evitan abusos y protegen tu servidor.
El quinto paso es exigir autenticación. Si tu formulario no es público, pide a los usuarios que inicien sesión antes de subir archivos. Así evitas que gente cualquiera de internet suba archivos maliciosos a tu servidor.
El sexto paso es usar HTTPS. Toda subida de archivos debe cifrarse en tránsito. Si subes un archivo por HTTP sin cifrar, un atacante en la red podría interceptarlo. Usa siempre HTTPS en cualquier formulario que incluya subida de archivos.
Cómo te ayuda WEMASY a crear formularios seguros de subida de archivos
El creador de formularios de WEMASY incluye campos de subida de archivos con seguridad y funciones de experiencia de usuario integradas. Puedes fijar los tipos de archivo aceptados, los tamaños máximos y si las subidas son obligatorias u opcionales sin escribir código. El creador de formularios valida los tipos de archivo tanto en el cliente como en el servidor para evitar subidas maliciosas.
Las subidas mediante formularios de WEMASY usan cifrado HTTPS seguro. Los archivos se guardan fuera del directorio de tu web y se entregan mediante enlaces de descarga seguros que caducan. No tienes que construir esta infraestructura tú mismo.
La interfaz de subida incluye arrastrar y soltar, vista previa de archivos, gestión de errores e indicador de progreso integrados. Los formularios muestran automáticamente a los usuarios qué tipos de archivo se aceptan y cuáles son los límites de tamaño. Se admiten subidas desde móvil y ordenador.
Puedes personalizar el texto del botón, los tipos de archivo aceptados y los límites de tamaño según las necesidades de tu formulario. Consulta qué funciones de formularios incluye tu plan de WEMASY.