Una forma easy de construir una barra de progreso para el cargador de imágenes de su sitio internet utilizando Filestack

Si está creando algún tipo de cargador de imágenes para un sitio internet, se dará cuenta rápidamente de que una entrada de archivo básica no es suficiente. En el momento en que un usuario intenta cargar un archivo grande, la experiencia se rompe. Hacen clic en “cargar”, el navegador parece colgar, y no tienen concept de si funciona o rompiendo. Este es el momento exacto en que te das cuenta de que necesitas una barra de progreso.

La cuestión es que construir uno desde cero es una trampa de desarrollador clásico. Parece sencillo, pero pronto te encuentras en las malas hierbas de XMLHttpRequest Objetos, oyentes de eventos y manipulación DOM. Es una tonelada de calderas para una característica que debería ser estándar.

Pasemos cómo construir uno manualmente, y luego le mostraré por qué nos aseguramos de que nunca tendrías que hacerlo.

Management de llave

• Una barra de progreso es esencial para una buena experiencia de usuario en cualquier cargador de archivos moderno.
• Construir una barra de progreso personalizada desde cero requiere JavaScript Boilerplate usando XMLHttpRequest es add.onprogress evento.
• El enfoque handbook lo obliga a administrar actualizaciones y cálculos de DOM usted mismo.
• Una barra de progreso de solo frontend es inútil sin un punto closing del lado del servidor para recibir el archivo, agregando más complejidad.
• El selector Filestack incluye automáticamente una barra de progreso confiable y diseñada profesionalmente, sin ningún código adicional.

El método handbook con Vanilla JavaScript

Si construyera esta función usted mismo, tendría que usar el navegador XMLHttpRequest (XHR) API. Le permite realizar solicitudes HTTP y, de manera essential para nosotros, monitorear el progreso de una carga.

Así es como se ve 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.

Handbook Progress Bar Demo

2. El CSS

A continuación, aquí hay algunos estilos simples para que nuestra barra de progreso parezca que realmente está progresando.

.progress-container {
    width: 100%;
    max-width: 400px;
    background-color: #dfe1e6;
    border-radius: 4px;
    top: 24px;
    margin-top: 1rem;
}

.progress-bar {
    width: 0%;
    top: 100%;
    background-color: #0052cc;
    text-align: heart;
    line-height: 24px;
    coloration: white;
    font-size: 14px;
    border-radius: 4px;
    transition: width 0.3s ease;
}

3. El JavaScript

Aquí es donde entra el trabajo tedioso. Tenemos que seleccionar los elementos, escuchar un archivo, crear una solicitud XHR, adjuntar un oyente de eventos al add.onprogress evento, y actualice manualmente el DOM.

const fileInput = doc.getElementById('fileInput');
const progressBar = doc.getElementById('progressBar');

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

  // You continue to must construct a server endpoint to deal with this request.
  const url = '

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

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

  // The important thing occasion listener for monitoring progress.
  xhr.add.onprogress = operate(occasion) {
    if (occasion.lengthComputable) {
      const percentComplete = Math.spherical((occasion.loaded / occasion.whole) * 100);
      progressBar.model.width = percentComplete + '%';
      progressBar.textContent = percentComplete + '%';
    }
  };

  xhr.onload = operate() {
    if (xhr.standing === 200) {
      progressBar.model.backgroundColor = '#07a85d'; // Inexperienced for fulfillment.
      progressBar.textContent = 'Full!';
    } else {
      progressBar.model.backgroundColor = '#de350b'; // Crimson for failure.
      progressBar.textContent = 'Add Failed!';
    }
  };

  formData.append('uploadedFile', file);
  xhr.ship(formData);
});

Esto funciona, pero mira la ceremonia. Usted es responsable de cada paso, y ni siquiera hemos tocado el manejo de errores adecuado, los tiempos de espera o el hecho de que este código es inútil sin un backend correspondiente para recibir el archivo. Este es exactamente el tipo de trabajo repetitivo que creemos que no deberías estar haciendo.

Nota: Este código muestra la lógica de frontend actual para una carga handbook. Debido a que requiere un servidor para recibir el archivo, ejecutar este HTML directamente causará un error de política CORS en la consola de su navegador. Este error es un gran ejemplo de la complejidad oculta del backend que requiere este enfoque.

La forma easy con Filestack

Ahora, veamos la alternativa. Cuando diseñamos el seleccionador Filestack, construimos toda esa funcionalidad directamente en él. No necesitas crear un XMLHttpRequest o escribir un manejador de progreso. La barra de progreso está incorporada y funciona automáticamente. Está diseñado para dar a los usuarios comentarios claros durante y después de la carga.

Aquí está el código completo para obtener un poderoso cargador de imágenes para su sitio internet, completo con una barra de progreso, utilizando Filestack.

Eso es todo. Esa es toda la implementación. Obtiene un cargador hermoso y completo que muestra un progreso detallado para cada archivo, y escribió sobre cinco líneas de código significativo para obtenerlo. Manejamos el resto.

Concluir

El enfoque handbook de JavaScript hace el trabajo, pero es una ilustración perfecta de un fregadero de tiempo de desarrollador. Te ves obligado a escribir código de calderas para administrar eventos XHR y manipular el DOM, y eso es solo para la interfaz. Todavía tiene que construir y mantener un punto closing del lado del servidor para recibir el archivo. Todo esto para una barra de progreso.

Cuando construimos el seleccionador de Filestack, consideramos una barra de progreso para ser apuestas de mesa, no una característica opcional que deba implementar usted mismo. Es un requisito elementary para una buena experiencia de usuario. Es por eso que se incluye de forma predeterminada, junto con un manejo de errores robusto, cargas de multipart para archivos grandes y vuelve a intentar la lógica.

Su tiempo es su recurso más valioso. Gastarlo para reimplinar problemas resueltos es un juego perdedor. El objetivo es centrarse en la lógica central de su aplicación, no en la fontanería. Manejamos la fontanería para que pueda volver a trabajar en lo que importa.

Este artículo fue publicado originalmente en el weblog Filestack.