Arrastre de archivos a la página
Gestione archivos soltados desde el escritorio.
Arrastre de archivos a la página es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 4 lecciones en total.
Archivos del escritorio
Además de mover elementos, la API Drag and Drop permite que los usuarios arrastren archivos desde su sistema operativo hasta su página: la base de las zonas de drop para cargas.
Aceptar drops de archivos
La configuración es similar a la de los drops de elementos: impida la acción predeterminada en dragover y drop. La diferencia es que debe leer archivos en lugar de utilizar getData.
dropzone.addEventListener("dragover", (e) => e.preventDefault());dataTransfer.files
Al realizar un drop, e.dataTransfer.files es una FileList de objetos File soltados.
dropzone.addEventListener("drop", (e) => {
e.preventDefault();
const files = e.dataTransfer.files;
console.log(files.length, "file(s) dropped");
});Iterar sobre los archivos
Un FileList tiene una estructura similar a la de un array. Conviértalo con el operador spread para iterarlo con métodos de arrays.
const files = [...e.dataTransfer.files];
files.forEach((file) => {
console.log(file.name, file.size, file.type);
});Metadatos de los archivos
Cada File expone name, size (bytes), type (MIME) y lastModified sin necesidad de leer su contenido.
console.log(file.name); // "photo.png"
console.log(file.type); // "image/png"
console.log(file.size); // 20481Filtrar por tipo
Valide los archivos soltados antes de procesarlos; por ejemplo, acepte únicamente imágenes.
const images = files.filter((f) => f.type.startsWith("image/"));
if (images.length === 0) console.log("No images dropped");Leer el contenido de los archivos
Utilice FileReader para leer un archivo. Use readAsText para texto y readAsDataURL para vistas previas.
const reader = new FileReader();
reader.onload = () => console.log(reader.result);
reader.readAsText(file);Previsualizar imágenes soltadas
URL.createObjectURL(file) proporciona una URL de vista previa instantánea sin leer el archivo completo. Revóquela cuando termine para liberar memoria.
const url = URL.createObjectURL(file);
img.src = url;
img.onload = () => URL.revokeObjectURL(url);items frente a files
dataTransfer.items ofrece más información que files: cada DataTransferItem indica kind ("file" o "string") y puede proporcionar una entrada de archivo o de directorio.
for (const item of e.dataTransfer.items) {
if (item.kind === "file") {
const file = item.getAsFile();
console.log(file.name);
}
}Subir archivos soltados
Incluya los archivos en FormData y envíelos mediante POST a su servidor.
const form = new FormData();
files.forEach((f) => form.append("files", f));
fetch("/upload", { method: "POST", body: form });Evitar la navegación accidental
Si se suelta un archivo fuera de su zona, el navegador navega hasta él. Proteja todo el documento para impedirlo.
window.addEventListener("dragover", (e) => e.preventDefault());
window.addEventListener("drop", (e) => e.preventDefault());Comprobación rápida
Pruebe los drops de archivos.
Repaso: arrastrar archivos
Creó una zona de drop de archivos, leyó dataTransfer.files, examinó los metadatos, filtró por tipo, previsualizó imágenes con URL de objetos, utilizó FileReader, subió archivos con FormData y evitó la navegación accidental. Con esto se completa Drag and Drop.
Preguntas frecuentes
¿La lección «Arrastre de archivos a la página» es gratis?
Sí — el texto completo de «Arrastre de archivos a la página» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Arrastre de archivos a la página»?
Gestione archivos soltados desde el escritorio. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar JavaScript Academy?
No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Arrastre de archivos a la página»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?
Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Cómo hacer que los elementos se puedan arrastrar
- Destinos de soltado y dataTransfer
- Respuesta visual durante el arrastre
- Arrastre de archivos a la página