Cómo crear una herramienta de cargador de archivos con Drag-and-Drop y almacenamiento en la nube

By Shefali Jangid ¿Alguna vez ha intentado cargar archivos a un sitio web?La mayoría de ellos sienten que están atrapados en el pasado. Los usuarios de hoy en día esperan más. quieren una herramienta de carga de archivos que se sienta sin esfuerzo, arrastre y descargue de su escritorio, visualizaciones instantáneas y barras de progreso que realmente les permitan saber lo que está sucediendo. Y no debería importar si están en el escritorio o móvil, o cargando una pequeña imagen o un vídeo masivo. Eso es lo que vamos a construir en esta guía. Vamos a crear una moderna herramienta de cargador de archivos con cargas de arrastre y descarga, seguimiento del progreso en tiempo real y integración de almacenamiento en la nube, para que no tengamos que hacer todo desde cero. Mantendremos el código limpio y simple con explicaciones para que puedas usarlo fácilmente para tus propios proyectos. Al final de esta guía tendremos un que cumple con las expectativas de hoy y hace que la gestión de archivos se sienta suave e intuitiva. Utilice la herramienta File Uploader Utilice la herramienta File Uploader Key Takeaways Temas clave Añade funcionalidad de arrastre y descarga a nuestra herramienta de cargador que se sienta natural y simple de usar. Construye una herramienta robusta que maneje varios tipos y tamaños de archivos de manera eficiente. Integre suavemente el almacenamiento en la nube sin gastar días en documentos de API. Mostrar progreso en tiempo real para que los usuarios siempre sepan lo que está sucediendo. Gestionar errores graciosamente, proporcionando un feedback claro. Understanding the Challenge Comprender el reto Construir una función de carga de archivos suena simple al principio. sólo tenemos que dejar que los usuarios elijan un archivo y lo suban, ¿verdad? En realidad, es mucho más complicado, especialmente si queremos construir una herramienta de cargador de archivos moderna que la gente realmente disfrute de usar. El primer gran obstáculo es la interfaz.Los usuarios ya no solo quieren un botón “seleccione archivo”. Esperan drag-and-drop, retroalimentación en tiempo real y una experiencia suave, ya sea en escritorio o móvil. Las cargas regulares de archivos usando formularios HTML básicos son lentas y confusas.Los usuarios no ven ningún progreso o mensaje, lo que les deja mirando a una pantalla en blanco mientras esperan que sus archivos se carguen. Como desarrollador, necesita comprobar si el archivo está permitido, asegurarse de que no sea demasiado grande y manejar diferentes tipos de archivos, todo lo que hace que parezca fácil y suave para los usuarios. El almacenamiento añade otra capa de complejidad. ¿Estás almacenando archivos localmente? ¿Configuras copias de seguridad? ¿Las empujas a través de un CDN para que los usuarios globales no se enfrenten a retrasos? El desarrollo de su propio sistema es caro y demorado, pero las APIs de almacenamiento en la nube también pueden parecer abrumadoras. Además, la seguridad también es una gran preocupación. Las cargas de archivos son uno de los vectores de ataque más comunes en la web. Si no verifica los archivos correctamente, corre el riesgo de enfrentarse a malware y fugas de datos. Learn more about ! secure file handling on OWASP’s guidelines Gestión segura de archivos según las directrices de OWASP Gestión segura de archivos según las directrices de OWASP Y por último, la escalabilidad. es lo suficientemente fácil como para manejar las cargas cuando tienes diez usuarios. Pero ¿qué sucede cuando cientos de personas están utilizando su herramienta de cargador de archivos simultáneamente? ahora también tiene que lidiar con la velocidad de Internet, cuánta carga su servidor puede manejar, y dónde almacenar todos los archivos. Building the Solution Construir la solución Let's start building our file uploader tool step by step. We'll begin with a simple HTML structure and progressively enhance it into a smooth, user-friendly uploader that our users will actually enjoy. Step 1: Creating the Basic Structure First, let's set up our HTML: Modern File Manager File Management System Drop files here or click to browse Support for images, documents, and videos up to 100MB

Uploading... 0% Here’s what it will look like: Paso 2: Estilo para un look moderno Ahora, añadamos algunos CSS para hacer que nuestra interfaz sea visualmente atractiva. Para el CSS completo. El repositorio de GitHub El repositorio de GitHub Aquí está lo que se ve después de añadir el CSS: Paso 3: Implementación de la funcionalidad JavaScript Core En este paso, construiremos la lógica que potencia el cargador de archivos, incluyendo el manejo de eventos, la validación, el seguimiento del progreso y la gestión de archivos. Paso 3.1: Instalación de clase y configuración inicial Configurar la clase FileManager y referenciar los elementos DOM necesarios. Iniciar una matriz vacía para rastrear los archivos cargados y llamar el método para agregar oyentes de eventos. class FileManager { constructor() { this.uploadArea = document.getElementById("upload-area"); this.fileInput = document.getElementById("file-input"); this.progressContainer = document.getElementById("upload-progress"); this.progressFill = document.querySelector(".progress-fill"); this.progressText = document.querySelector(".progress-text"); this.fileList = document.getElementById("file-list"); this.files = []; this.initializeEventListeners(); } // Reference DOM elements for file upload // Store uploaded files // Set up event handlers Paso 3.2: Configurar escuchadores de eventos Añadir manejadores para hacer clic, arrastrar y caer, y seleccionar archivos para que el cargador sea interactivo. initializeEventListeners() { this.uploadArea.addEventListener("click", () => { this.fileInput.click(); }); this.fileInput.addEventListener("change", (e) => { this.handleFiles(e.target.files); }); this.uploadArea.addEventListener("dragover", (e) => { e.preventDefault(); this.uploadArea.classList.add("dragover"); }); this.uploadArea.addEventListener("dragleave", (e) => { e.preventDefault(); this.uploadArea.classList.remove("dragover"); }); this.uploadArea.addEventListener("drop", (e) => { e.preventDefault(); this.uploadArea.classList.remove("dragover"); this.handleFiles(e.dataTransfer.files); }); } // Open file dialog when user clicks the upload area // Handle file selection from the input // Drag over the area - highlight the drop zone // Remove highlight when dragging leaves // Handle files dropped onto the area Paso 3.3: Tratamiento y validación de archivos Filtrar archivos basados en el tamaño y solo proceder con los válidos. handleFiles(fileList) { const validFiles = Array.from(fileList).filter((file) => { if (file.size > 100 * 1024 * 1024) { alert(`${file.name} is too large. Maximum size is 100MB.`); return false; } return true; }); if (validFiles.length > 0) { this.uploadFiles(validFiles); } } // Reject files larger than 100MB ⚠️Importante: Validar los archivos tanto del lado del cliente como del lado del servidor. Las verificaciones del lado del cliente dan un feedback instantáneo, pero sólo la validación del lado del servidor protege nuestra aplicación de cargas maliciosas. Paso 3.4: Cargar archivos múltiples Mostrar la barra de progreso, subir cada archivo uno a la vez y ocultar el progreso una vez hecho. async uploadFiles(files) { this.showProgress(); for (let i = 0; i { let progress = 0; const interval = setInterval(() => { progress += Math.random() * 15; if (progress >= 100) { progress = 100; clearInterval(interval); this.addFileToList(file); resolve(); } const overallProgress = ((current - 1) / total) * 100 + progress / total; this.updateProgress(overallProgress, `Uploading ${current} of ${total}...`); }, 200); }); } // Add file to list once upload is done Paso 3.6: Mostrar los archivos cargados Render the uploaded file in the UI with an icon, size, date, and a delete option. addFileToList(file) { const fileCard = document.createElement("div"); fileCard.className = "file-card"; const fileIcon = this.getFileIcon(file.type); const fileSize = this.formatFileSize(file.size); fileCard.innerHTML = ` ${fileIcon} ${file.name} ${fileSize} • ${new Date().toLocaleDateString()}

Delete `; this.fileList.appendChild(fileCard); this.files.push(file); } Paso 3.7: Eliminar los archivos Permite a los usuarios eliminar archivos, actualizando la lista de archivos y la interfaz de usuario en consecuencia. deleteFile(fileName) { this.files = this.files.filter((f) => f.name !== fileName); this.fileList.innerHTML = ""; this.files.forEach((f) => this.addFileToList(f)); } Paso 3.8: Iconos de archivos basados en tipo Mostrar iconos adecuados basados en el tipo de archivo MIME para una mejor experiencia del usuario. getFileIcon(mimeType) { if (mimeType.startsWith("image/")) return "🖼️"; if (mimeType.startsWith("video/")) return "🎥"; if (mimeType.startsWith("audio/")) return "🎵"; if (mimeType.includes("pdf")) return "📄"; if (mimeType.includes("word")) return "📝"; if (mimeType.includes("excel") || mimeType.includes("spreadsheet")) return "📊"; return "📁"; } 💡Tip: Mostrar iconos de archivos y tamaños formateados para dar un mejor feedback a los usuarios. Paso 3.9: Formatear los tamaños de archivo Convertir los tamaños de archivo en unidades legibles como KB, MB o GB. formatFileSize(bytes) { if (bytes === 0) return "0 Bytes"; const k = 1024; const sizes = ["Bytes", "KB", "MB", "GB"]; const i = Math.floor(Math.log(bytes) / Math.log(k)); return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i]; } Paso 3.10: Mostrar y ocultar el progreso de la carga Controlar la visibilidad de la barra de progreso y actualizar su valor de forma dinámica. showProgress() { this.progressContainer.classList.remove("hidden"); } hideProgress() { setTimeout(() => { this.progressContainer.classList.add("hidden"); this.updateProgress(0, "Upload complete!"); }, 1000); } updateProgress(percent, text) { this.progressFill.style.width = percent + "%"; this.progressText.textContent = text; } } Paso 3.11: Inicialización del Administrador de archivos Crear una instancia de la clase FileManager para iniciar la funcionalidad. const fileManager = new FileManager(); // Start the file manager Accede al código fuente completo de esta herramienta de carga de archivos aquí! Access the complete source code for this file uploader tool here! Accede al código fuente completo de esta herramienta de carga de archivos aquí! Con esto, nuestra herramienta de carga de archivos es totalmente interactiva, y los usuarios pueden arrastrar, descargar, subir y gestionar archivos sin esfuerzo. Ref: MDN Web APIs - Archivo MDN Web APIs - Archivo MDN Web APIs - Archivo Paso 4: Integración de Filestack para almacenamiento en la nube En este paso, llevaremos nuestra herramienta de carga de archivos al siguiente nivel conectándola a la nube. para sacar directamente del almacenamiento en la nube, generar enlaces seguros y hacer que todo se sienta sin problemas para los usuarios. Filtro Filtro Primero, añade el SDK de Filestack a nuestro encabezado HTML: https://static.filestackapi.com/filestack-js/4.x.x/filestack.min.js Luego, extendamos nuestra clase FileManager para integrar cargas en la nube, mostrar previews y gestionar enlaces de archivos. Para información detallada, visita . API de referencia de Filestack API de referencia de Filestack Paso 4.1: Extender el FileManager con la integración de Filestack class EnhancedFileManager extends FileManager { constructor() { super(); this.client = filestack.init('YOUR_API_KEY_HERE'); this.picker = null; } // Extend the basic FileManager class to add cloud storage functionality using Filestack // Call the parent class constructor // Initialize Filestack with your API key // Placeholder for the Filestack picker instance Importante: Utilice su propia clave de API en lugar de YOUR_API_KEY_HERE; se puede obtener desde el panel de control de Filestack. Importante: Utilice su propia clave de API en lugar de YOUR_API_KEY_HERE; se puede obtener desde el panel de control de Filestack. Filestack y otros servicios de nube requieren claves de API y configuración.Para el uso de la producción, siempre proteja sus claves de API y configure la configuración de seguridad adecuada. Paso 4.2: Inicialización de escuchadores de eventos con el botón Filestack initializeEventListeners() { super.initializeEventListeners(); this.addFilestackButton(); } // Set up existing file selection and drag-drop listeners // Add a new button for accessing cloud storage through Filestack Paso 4.3: Añadir el botón Filestack Picker addFilestackButton() { const button = document.createElement("button"); button.textContent = "Browse Cloud Storage"; button.className = "filestack-btn"; button.onclick = (e) => { e.stopPropagation(); this.openFilestack(); }; this.uploadArea.appendChild(button); } // Button label // Apply styling // Open the Filestack picker when the button is clicked // Prevent triggering other events // Add the button to the upload area Paso 4.4: Configurar y abrir el Filestack Picker openFilestack() { const options = { accept: ['image/*', 'video/*', 'application/pdf', '.doc', '.docx'], maxFiles: 10, uploadInBackground: false, onUploadDone: (result) => { result.filesUploaded.forEach(file => { this.addCloudFileToList(file); }); } }; this.client.picker(options).open(); } // Allowed file types // Limit number of files selectable at once // Upload immediately instead of in background // Add each uploaded file to the file list // Open the Filestack file picker with the above options Paso 4.5: Mostrar los archivos cargados desde el almacenamiento en la nube addCloudFileToList(file) { const fileCard = document.createElement('div'); fileCard.className = 'file-card cloud-file'; fileCard.innerHTML = ` ☁️ ${file.filename} ${this.formatFileSize(file.size)} • Cloud Storage

View Copy Link `; this.fileList.appendChild(fileCard); } // Styling for cloud files // Add to the file list Paso 4.6: Cargar archivos directamente a Filestack async uploadSingleFile(file, current, total) { try { const fileHandle = await this.client.upload(file, { onProgress: (evt) => { const progress = (evt.loaded / evt.total) * 100; const overallProgress = ((current - 1) / total) * 100 + (progress / total); this.updateProgress(overallProgress, `Uploading ${current} of ${total}...`); } }); this.addCloudFileToList({ filename: file.name, size: file.size, url: fileHandle.url }); } catch (error) { console.error('Upload failed:', error); alert(`Failed to upload ${file.name}. Please try again.`); } } } // Upload file using Filestack and track progress // Once uploaded, add the file to the list view Paso 4.7: Inicialización del Gerenciador de archivos mejorado const fileManager = new EnhancedFileManager(); // Instantiate the EnhancedFileManager to replace the default FileManager functionality Añade este CSS para coincidir con nuestros estilos existentes: .filestack-btn, .btn-view, .btn-share { margin-top: 1rem; padding: 0.75rem 1.25rem; background: linear-gradient(135deg, #00030c, #764ba2); color: #fff; border: none; border-radius: 8px; font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); } .filestack-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2); } .filestack-btn:active { transform: translateY(0); box-shadow: 0 3px 7px rgba(0, 0, 0, 0.15); } Esta integración transforma nuestro gestor de archivos básico en una poderosa herramienta. Puede manejar archivos de múltiples fuentes, cargas locales, servicios de almacenamiento en la nube como Google Drive y Dropbox, o incluso importaciones de URL. Filestack gestiona todo el levantamiento pesado detrás de las escenas. Esto incluye el manejo de diferentes proveedores de almacenamiento, distribución de CDN y transformaciones de archivos. Ref: Documentación de Filestack Documentación de Filestack Documentación de Filestack Mejorar la implementación Ahora, añadamos algunas características avanzadas a nuestra herramienta de cargador que hará que nuestro gestor de archivos se destaque. Archivos en tiempo real Para imágenes, vídeos y PDFs, podemos generar previews directamente en la lista de archivos: generatePreview(file) { if (file.mimetype && file.mimetype.startsWith("image/")) { return ` `; } else if (file.mimetype === "application/pdf") { return ` `; } return ""; } Añade esto a nuestro archivo CSS: .file-preview { width: 100%; max-height: 150px; object-fit: cover; border-radius: 10px; margin-top: 10px; cursor: pointer; } Y actualice la función addCloudFileToList para mostrar las previstas de esta manera: addCloudFileToList(file) { const fileCard = document.createElement("div"); fileCard.className = "file-card cloud-file"; const preview = this.generatePreview(file); // ☁️ ${file.filename} ${this.formatFileSize(file.size)} • Cloud Storage

${preview} View Copy Link `; this.fileList.appendChild(fileCard); } 💡Tip: Las visualizaciones instantáneas mejoran la confianza de los usuarios al permitirles confirmar visualmente las cargas. Buscar y filtrar Haz que nuestra herramienta de cargador de archivos sea aún más fácil de usar permitiendo a los usuarios buscar y filtrar archivos en tiempo real: implementSearch() { const searchInput = document.createElement("input"); searchInput.type = "text"; searchInput.placeholder = "Search files..."; searchInput.className = "search-input"; this.uploadArea.insertAdjacentElement("beforebegin", searchInput); searchInput.addEventListener("input", (e) => { this.filterFiles(e.target.value); }); } filterFiles(query) { const fileCards = this.fileList.querySelectorAll(".file-card"); fileCards.forEach((card) => { const fileName = card.querySelector("h4").textContent.toLowerCase(); card.style.display = fileName.includes(query.toLowerCase()) ? "flex" : "none"; }); } En el constructor de EnhancedFileManager, llame this.implementSearch(); así: class EnhancedFileManager extends FileManager { constructor() { super(); this.client = filestack.init("YOUR_API_KEY"); this.picker = null; this.implementSearch(); } ... } // <-- add this Añade este CSS: .search-input { width: 100%; padding: 0.75rem 1.25rem; margin-bottom: 20px; border: 2px solid #e2e8f0; border-radius: 8px; font-size: 0.95rem; color: #2d3748; outline: none; transition: all 0.3s ease; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); } .search-input:focus { border-color: #764ba2; box-shadow: 0 0 0 3px rgba(118, 75, 162, 0.3); } .search-input::placeholder { color: #a0aec0; font-style: italic; } ️Best Practice: Siempre permita a los usuarios filtrar archivos fácilmente al administrar listas grandes. La belleza de usar Filestack es que muchas características avanzadas vienen incorporadas. Obtén transformaciones de imagen, conversiones de documentos e incluso un corte inteligente fuera de la caja. Eso significa que no tiene que construir estas características complejas desde cero. Y tampoco tendrás que mantener múltiples servicios de terceros. Las mejores prácticas y las trampas comunes Aquí hay algunas lecciones importantes que he aprendido (a veces de la manera difícil) al construir herramientas de cargador de archivos: Validar los archivos tanto en el cliente como en el servidor: la validación del lado del cliente es útil porque da a los usuarios un feedback rápido, pero la verdadera seguridad también proviene de la verificación de los archivos en el servidor. Gestionar errores correctamente: las cargas no siempre funcionan sin problemas.Los archivos pueden fallar, las redes pueden caer o los servidores pueden colapsar.Siempre muestren mensajes de error claros y dan a los usuarios una forma de intentarlo de nuevo. Accesibilidad: Asegúrese de que su cargador funcione para todos.Añade etiquetas ARIA a los lectores de pantalla, permita la navegación en el teclado y no confíe únicamente en los colores para mostrar los mensajes.Use la estructura correcta de HTML y prueba con herramientas de accesibilidad. Ver el rendimiento de carga: Los archivos grandes en redes lentas pueden fallar o fallar.El uso de cargas fragmentadas puede ayudar, y mostrar a los usuarios cuánto tiempo queda hace una gran diferencia.Las herramientas como Filestack manejan esto para usted, pero si lo está construyendo usted mismo, no lo salte. Plan de costes de almacenamiento: El almacenamiento de archivos puede llegar a ser caro rápidamente. Limpiar los archivos temporales, comprimirlos cuando sea posible y establecer límites en el tamaño del archivo en función de la capacidad de su infraestructura. Almacenar archivos de forma segura: Almacenar siempre los archivos cargados fuera de su directorio raíz web y servirlos a través de URLs firmados para evitar el acceso no autorizado y mejorar la seguridad. Conclusión Construir una herramienta de cargador de archivos moderna no tiene que ser complicada. Comience con una base HTML sólida, mejoralo paso a paso, y . Utiliza herramientas como Filestack para almacenamiento en la nube Utiliza herramientas como Filestack para almacenamiento en la nube El objetivo es un cargador suave y fácil de usar que la gente realmente disfruta de usar. Concéntrese en la experiencia primero: haga que el arrastre y la descarga se sienta natural, las previstas se carguen de inmediato y las barras de progreso sean significativas. Mantenga la tecnología compleja detrás de las escenas, oculta detrás de una interfaz limpia y simple.Una vez que esto funcione, puede agregar características avanzadas como el compartir archivos, la edición colaborativa o los flujos de trabajo automatizados. Gestión de archivos es algo con lo que los usuarios interactúan todos los días. Obtén esto bien, y tendrás usuarios más felices, mejor compromiso y mucho menos boletos de soporte. Recursos para el aprendizaje adicional GitHub Repository con código completo MDN Web APIs - Archivo OWASP - Upload de archivos seguros Documentación de Filestack GitHub Repository con código completo MDN Web APIs - Archivo OWASP - Upload de archivos seguros Documentación de Filestack Sobre el autor Shefali Jangid es una desarrolladora web, escritora técnica y creadora de contenido apasionada por la construcción de herramientas de desarrollo intuitivas y recursos educativos. Ayudar a los desarrolladores a crear mejores experiencias web con código limpio, eficiente y accesible. shefali.dev Página oficial.dev