La mayoría de los usuarios no tiene idea: para subir un archivo a un sitio web, no necesita apuntar al diminuto botón «Elegir archivo» y navegar por el gestor de archivos. Basta con un movimiento simple: arrastre el archivo desde su explorador de archivos directamente sobre ese botón.

Esto no es un plugin ni el resultado de un script ingenioso. <input type="file">, un elemento HTML estándar, admite arrastrar y soltar de forma nativa a nivel del navegador. Sin JavaScript, sin bibliotecas, sin zonas de colocación. El comportamiento está descrito en la especificación HTML y funciona al menos desde mediados de la década de 2010.

El equipo del blog técnico probó este truco en una docena de sitios web. Funciona en todos los que usan un <input type="file"> nativo: subir plugins a la administración de WordPress, enviar escaneos al soporte técnico, adjuntar currículums en portales de RR. HH. Sin errores, sin bailar con el gestor de archivos.

💡 Resumen rápido:

• Arrastre un archivo desde su explorador de archivos al botón «Elegir archivo» en cualquier formulario; el navegador insertará el archivo en el input automáticamente.
• No se necesita código: el <input type="file"> nativo acepta archivos mediante arrastrar y soltar por defecto.
• El soporte para múltiples archivos funciona a través del atributo multiple: seleccione un grupo en su explorador de archivos, arrástrelos y todo el lote se envía al servidor en una sola operación.
• Los dispositivos móviles no admiten este truco: las interfaces táctiles no implementan el arrastre entre aplicaciones.

Este breve video demuestra cómo funciona <input type="file"> y los principios básicos de la carga de archivos en el navegador. Comprender estos fundamentos ayuda a entender por qué arrastrar y soltar sobre el botón funciona sin código adicional.

Dónde funciona esto

La funcionalidad opera en escritorio en todos los navegadores modernos. Probamos en Chrome, Firefox, Safari (macOS), Vivaldi y Edge sobre Chromium; el archivo se acepta correctamente en cada uno de ellos. Según los datos de Can I Use, el soporte cubre a más del 95 % de los usuarios de escritorio desde hace varios años.

Si el campo tiene el atributo multiple, puede arrastrar un grupo completo de archivos de una vez. El navegador los añade todos a la cola de carga y, al enviar el formulario, el servidor recibe un arreglo de archivos de la manera estándar. En la práctica, esto acelera radicalmente las cargas de medios en WordPress: seleccione una docena de imágenes en su explorador de archivos, arrástrelas al botón «Elegir archivos» en la biblioteca de medios y todo el lote se envía al servidor. Sin seleccionarlas una por una a través de un diálogo.

Los dispositivos móviles no admiten este truco. Las interfaces táctiles no implementan el arrastre entre aplicaciones en la forma que existe en escritorio. Pero para los usuarios de escritorio, cada carga ahorra de 5 a 10 segundos y elimina la carga cognitiva de navegar por árboles de carpetas.

Advertencia importante: el truco solo funciona con <input type="file"> nativo. Si un sitio web usa un elemento personalizado, un <div> o <button> estilizado que abre el diálogo de archivos mediante programación, arrastrar no funcionará. De manera similar, si el JavaScript del sitio web intercepta los eventos dragover y drop a nivel de documento y llama a e.preventDefault(), el comportamiento nativo del navegador queda bloqueado.

Por qué nadie habla de esto

La paradoja: la funcionalidad lleva al menos una década en los navegadores, pero el usuario promedio no la conoce. Los desarrolladores a menudo tampoco están al tanto: la costumbre de recurrir inmediatamente a bibliotecas de arrastrar y soltar pesa más que el deseo de verificar el comportamiento nativo.

De ahí las toneladas de tutoriales sobre zonas de colocación personalizadas. El mismo artículo en CSS-Tricks desglosa en detalle una implementación en JavaScript con manejadores dragover y drop, leyendo archivos mediante FileReader. Mientras tanto, la capacidad básica del navegador acumula polvo en las sombras.

Por qué los desarrolladores siguen escribiendo sus propias zonas de colocación:

• Retroalimentación visual. La carga nativa no resalta el botón al pasar un archivo por encima, y el usuario no entiende que arrastrar funcionará. Una zona de colocación personalizada proporciona un contorno estilizado, cambio de fondo, animación.

• Vista previa y validación. Una implementación en JavaScript muestra una miniatura de imagen antes de la carga, verifica el tamaño y tipo de archivo en el cliente, muestra una barra de progreso.

• Múltiples zonas. Cuando una página tiene varios puntos de carga independientes, por ejemplo una foto de perfil y una galería en una cuenta personal, se necesita una vinculación clara del archivo a un campo específico.

El soporte nativo no elimina estos escenarios. Pero en formularios simples, subir un documento al soporte técnico, enviar un currículum, instalar un plugin en la administración de WordPress, simplemente no se necesita código personalizado. El navegador ya sabe hacerlo todo.

Cómo añadir retroalimentación visual con un par de líneas

Si necesita conservar el comportamiento nativo pero dar al usuario una pista visual, basta con un mínimo de CSS y JavaScript. El código a continuación resalta el botón de selección de archivo al pasar un archivo arrastrado por encima, sin tocar el mecanismo de carga en sí.

Cree un envoltorio alrededor de <input type="file"> en el marcado:

1
<div class="file-upload-wrapper">
2
  <input type="file">
3
</div>

El script se cuelga del documento completo, no de un input específico, porque el evento dragover se dispara al entrar en la ventana del navegador. Cuando se detecta el arrastre, la clase drag-over se añade al envoltorio:

1
const fileInput = document.querySelector('input[type="file"]');
2
const wrapper = fileInput.closest('.file-upload-wrapper');
3
 
4
document.addEventListener('dragover', (e) => {
5
  e.preventDefault();
6
  wrapper?.classList.add('drag-over');
7
});
8
 
9
document.addEventListener('dragleave', (e) => {
10
  if (!e.relatedTarget || e.relatedTarget === document.documentElement) {
11
    wrapper?.classList.remove('drag-over');
12
  }
13
});
14
 
15
document.addEventListener('drop', (e) => {
16
  e.preventDefault();
17
  wrapper?.classList.remove('drag-over');
18
});

La clase drag-over se estiliza con una línea de CSS. A continuación, un contorno azul discontinuo y un relleno de fondo claro, señalando «suelte aquí»:

1
.file-upload-wrapper.drag-over input[type="file"] {
2
  outline: 2px dashed #2563eb;
3
  background: rgba(37, 99, 235, 0.05);
4
}

El archivo sigue aterrizando en el input de forma nativa. JavaScript no toca el mecanismo de carga, solo añade retroalimentación visual. Sin FileReader, sin FormData construido manualmente.

Si necesita más, validar tipo y tamaño antes del envío, vista previa de imagen, barra de progreso, entonces tiene sentido mirar hacia una zona de colocación personalizada con todas las funciones. Afortunadamente, MDN y web.dev han documentado este proceso de principio a fin.

⁉️🤔 Preguntas frecuentes

¿Funciona esto en WordPress?

Sí, el cargador estándar de WordPress (plugins, temas, biblioteca de medios) está construido sobre <input type="file"> nativo. Arrastrar funciona directamente en la administración sin plugins adicionales. El único matiz: la biblioteca de medios en modo cuadrícula usa una zona de colocación personalizada encima del campo nativo, por lo que la retroalimentación visual allí es más rica, pero el mecanismo básico es el mismo. Verificado en versiones de WordPress desde la 5.0 hasta la 6.7.

¿Qué formatos de archivo son compatibles?

El navegador no impone restricciones de formato al arrastrar: el archivo se pasa al input tal cual. Si el campo tiene un atributo accept (por ejemplo, accept="image/*,.pdf"), el filtrado se activará a nivel del input exactamente igual que al elegir mediante el diálogo de archivos. Los archivos de tipos no admitidos quedarán ocultos de la cola.

¿Es seguro arrastrar?

Absolutamente. Arrastrar un archivo a <input type="file"> no otorga al sitio web acceso al sistema de archivos del usuario. El navegador solo transfiere el archivo en sí (o un arreglo de archivos con multiple), pero no su ruta en disco. El modelo de seguridad es el mismo que al cargar mediante el diálogo de selección estándar: el sitio web no sabe de qué carpeta provino el archivo y no puede leer otros archivos cercanos.

¿Por qué no funciona arrastrar en algunos sitios web?

Dos razones. Primera: el sitio web no usa un <input type="file"> nativo, sino un elemento personalizado, un <div> o <button> estilizado que abre el diálogo de archivos mediante programación. Los eventos nativos de arrastrar y soltar no están vinculados a dicho elemento. Segunda: el JavaScript del sitio web intercepta los eventos dragover y drop a nivel de documento y llama a e.preventDefault(), bloqueando el comportamiento estándar del navegador. Normalmente los desarrolladores capturan estos eventos para su propia zona de colocación y no esperan que esto rompa la carga nativa.

¿Puedo arrastrar un archivo de un navegador a otro?

No. El mecanismo solo funciona desde el gestor de archivos del sistema operativo hacia la ventana del navegador. Arrastrar entre pestañas o de un navegador a otro no es compatible: el modelo de seguridad del navegador no permite el acceso al sistema de archivos de otro contexto.

Qué usar: zona de colocación o botón nativo

El truco de arrastrar sobre el botón de selección de archivo ahorra tiempo y reduce la fricción. No necesita alcanzar el ratón, apuntar al botón «Examinar», navegar por el árbol de carpetas. Un solo movimiento y el archivo ya está en el formulario.

Para escenarios simples, cargar documentos, escaneos, archivos comprimidos, instalar plugins en WordPress, el comportamiento nativo con una ligera mejora visual es más que suficiente. Antes de conectar kilobytes de JavaScript para una zona de colocación personalizada, verifique: quizás a su formulario le basta con lo que el navegador ya sabe hacer.

Si usted administra sitios web WordPress, en su próxima actualización intente arrastrar un plugin o tema directamente sobre el botón de carga. Probablemente se sorprenderá de lo mucho más simple que es en comparación con navegar por el gestor de archivos.