Si está construyendo cualquier tipo de cargador de imagen para un sitio web, rápidamente se dará cuenta de que una entrada de archivo básico no es suficiente. El momento en que un usuario intenta cargar un archivo grande, la experiencia se rompe. Ellos hacen clic en "Upload", el navegador parece colgar, y no tienen idea de si está funcionando o roto. Este es el momento exacto en el que se da cuenta de que necesita una barra de progreso. La cosa es, construir uno desde cero es una trampa clásica para desarrolladores.Parece sencillo, pero pronto te encuentras profundamente en las hierbas de objetos, escuchadores de eventos y manipulación DOM. Es una tonelada de boilerplate para una función que debería ser estándar. XMLHttpRequest Vamos a caminar por cómo construir uno manualmente, y luego te mostraré por qué nos aseguramos de que nunca tendrás que hacerlo. Temas clave 
 
 
 
 
 
 Una barra de progreso es esencial para una buena experiencia de usuario en cualquier cargador de archivos moderno. La construcción de una barra de progreso personalizada desde cero requiere boilerplate JavaScript usando XMLHttpRequest su evento upload.onprogress. El enfoque manual le obliga a gestionar las actualizaciones y cálculos DOM usted mismo. Una barra de progreso solo frontend es inútil sin un punto final del lado del servidor para recibir el archivo, añadiendo más complejidad. El selector de Filestack incluye automáticamente una barra de progreso confiable y diseñada profesionalmente, sin necesidad de código adicional. El método manual con Vanilla JavaScript Si usted estaba construyendo esta característica usted mismo, usted tendría que usar el navegador. (XHR) API. Permite realizar solicitudes HTTP y, crucial para nosotros, monitorear el progreso de una carga. XMLHttpRequest Aquí está cómo es esa implementación, pieza por pieza. 1 El HTML Primero, necesita una entrada de archivo básica y un contenedor para la barra de progreso. <h2>Manual Progress Bar Demo</h2>
<input type="file" id="fileInput">

<div class="progress-container">
    <div class="progress-bar" id="progressBar">0%</div>
</div>
 2 El CSS A continuación, aquí están algunos estilos simples para hacer que nuestra barra de progreso parezca que realmente está progresando. .progress-container {
    width: 100%;
    max-width: 400px;
    background-color: #dfe1e6;
    border-radius: 4px;
    height: 24px;
    margin-top: 1rem;
}

.progress-bar {
    width: 0%;
    height: 100%;
    background-color: #0052cc;
    text-align: center;
    line-height: 24px;
    color: white;
    font-size: 14px;
    border-radius: 4px;
    transition: width 0.3s ease;
}
 2 El JavaScript Tenemos que seleccionar los elementos, escuchar un archivo, crear una solicitud XHR, unir un escuchador de eventos a la actualización, y actualizar manualmente el dom. upload.onprogress const fileInput = document.getElementById('fileInput');
const progressBar = document.getElementById('progressBar');

fileInput.addEventListener('change', (e) => {
  const file = e.target.files[0];
  if (!file) {
    return;
  }

  // You still need to build a server endpoint to handle this request.
  const url = 'https://your-backend-endpoint.com/upload';

  const xhr = new XMLHttpRequest();
  const formData = new FormData();

  xhr.open('POST', url, true);

  // The key event listener for tracking progress.
  xhr.upload.onprogress = function(event) {
    if (event.lengthComputable) {
      const percentComplete = Math.round((event.loaded / event.total) * 100);
      progressBar.style.width = percentComplete + '%';
      progressBar.textContent = percentComplete + '%';
    }
  };

  xhr.onload = function() {
    if (xhr.status === 200) {
      progressBar.style.backgroundColor = '#07a85d'; // Green for success.
      progressBar.textContent = 'Complete!';
    } else {
      progressBar.style.backgroundColor = '#de350b'; // Red for failure.
      progressBar.textContent = 'Upload Failed!';
    }
  };

  formData.append('uploadedFile', file);
  xhr.send(formData);
});
 Usted es el responsable de cada paso, y ni siquiera hemos tocado el correcto manejo de errores, los tiempos, o el hecho de que este código es inútil sin un backend correspondiente para recibir el archivo. Este código muestra la lógica frontend real para una descarga manual. Debido a que requiere un servidor para recibir el archivo, ejecutar este HTML directamente causará un error. error en la consola de su navegador. Este error es un gran ejemplo de la complejidad oculta de backend que este enfoque requiere. Note: Cursos de política La manera sencilla con Filestack Ahora, echemos un vistazo a la alternativa.Cuando diseñamos el selector de Filestack, construimos toda esa funcionalidad directamente en él. Escribe un progreso manejado. Está diseñado para dar a los usuarios un feedback claro durante y después de la descarga. XMLHttpRequest The progress bar is built-in and works automatically. Aquí está el código completo para obtener un potente cargador de imágenes para su sitio web, completo con una barra de progreso, utilizando Filestack. <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Filestack Uploader with Automatic Progress Bar</title>
    <script src="https://static.filestackapi.com/filestack-js/4.x.x/filestack.min.js"></script>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
        }
        #uploadBtn {
            font-size: 16px;
            padding: 12px 24px;
            cursor: pointer;
        }
    </style>
</head>
<body>

    <h2>Filestack Uploader Demo</h2>
    <p>Click the button and watch the built-in progress bar.</p>
    <button id="uploadBtn">Launch Uploader</button>

    <script>
        // Replace 'YOUR_API_KEY' with your actual Filestack API key.
        // You can get one by signing up at filestack.com.
        const apikey = 'YOUR_API_KEY';
        const client = filestack.init(apikey);

        const options = {
            // This function will be called once the upload is complete.
            onUploadDone: (res) => console.log(res),
            // You can add more options here to customize the picker,
            // such as file types, max size, cloud sources, etc.
            // For example:
            // accept: ['image/*', 'video/*'],
            // maxFiles: 5,
            // transformations: {
            //   crop: true,
            //   rotate: true,
            // },
        };

        // Attach an event listener to the button to open the Filestack picker.
        document.getElementById('uploadBtn').addEventListener('click', () => {
            client.picker(options).open();
        });
    </script>

</body>
</html>
 Eso es todo.Esa es la implementación entera.Usted obtiene un hermoso cargador de funciones completas que muestra el progreso detallado de cada archivo, y escribió alrededor de cinco líneas de código significativo para obtenerlo.Nos encargamos del resto. envuelve El enfoque manual de JavaScript hace el trabajo, pero es una ilustración perfecta de un sink de tiempo de desarrollador.Estás obligado a escribir código de boilerplate para gestionar eventos XHR y manipular el DOM, y eso es sólo para el frontend.Todavía tienes que construir y mantener un punto final del lado del servidor para recibir realmente el archivo.Todo esto para una barra de progreso. Cuando construimos el selector de Filestack, consideramos que una barra de progreso es una apuesta de tabla, no una característica opcional que debe implementar usted mismo.Es un requisito fundamental para una buena experiencia del usuario.Es por eso que está incluido por defecto, junto con robusto manejo de errores, cargas multipartes para archivos grandes y lógica de retry. Su tiempo es su recurso más valioso.Gastarlo para reimplantar problemas resueltos es un juego perdedor.El objetivo es centrarse en la lógica central de su aplicación, no en el suministro de agua. This article was originally published on the  . Filestack blog Archivo del blog

2022 - HackerNoon Contributor of the Year - Api

Learn More

Nominated for 2022 - HackerNoon Contributor of the Year - Api

Este audio es producido en el idioma original de la historia!

Demasiado Largo; Para Leer

Make resilience your competitive advantage

Una manera sencilla de construir una barra de progreso para el cargador de imágenes de su sitio web usando FileStack

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

Liberando el poder de la IA. Una revisión sistemática de técnicas de vanguardia: resumen e introducción

La guía completa para una migración exitosa a la nube: estrategias y mejores prácticas

La fuga rápida del sistema Claude Sonnet 3.5: un análisis forense

Una breve introducción a la teoría del cerebro de Boltzmann

Liberando el poder de la IA. Una revisión sistemática de técnicas de vanguardia: resumen e introducción

La guía completa para una migración exitosa a la nube: estrategias y mejores prácticas

La fuga rápida del sistema Claude Sonnet 3.5: un análisis forense

Una breve introducción a la teoría del cerebro de Boltzmann

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps