La carga de archivos es muy común en cualquier aplicación web y cuando se trata de cargar archivos y recursos a través de Internet (en un navegador), las cosas pueden ser algo estresantes. Afortunadamente, con HTML 5, los elementos de entrada que normalmente vienen con control de formulario para permitir a los usuarios modificar datos pueden resultar muy útiles para simplificar la carga de recursos.

En este artículo, veremos más de cerca cómo manejar la carga de archivos usando JavaScript estándar. El objetivo es enseñarle cómo crear un componente de carga de archivos sin la necesidad de una biblioteca externa y también aprender algunos conceptos básicos en JavaScript. También aprenderá cómo mostrar el estado de progreso de una carga a medida que se realiza.

Código fuente: como de costumbre, puedes modificar el código fuente alojado en el repositorio de GitHub para el proyecto.

Configuración del proyecto

En primer lugar, en tu directorio preferido, crea una nueva carpeta para el proyecto:

$ mkdir file-upload-progress-bar-javascript

Después de hacerlo, creemos los archivos index.html, main.css y app.js donde escribiremos todo el marcado para nuestro proyecto.

$ touch index.html && touch main.css && touch app.js

Ahora podemos comenzar a construir la estructura para la carga del archivo creando una plantilla HTML básica con las etiquetas

y :

A continuación, agregamos estilos base para el proyecto en main.css:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

Para mejorar el aspecto de nuestras aplicaciones, usaremos los íconos de la biblioteca font awesome que podemos agregar a nuestro proyecto a través de un código de kit que se puede crear en el sitio web oficial de la biblioteca font awesome.

Ahora, index.html está actualizado y el archivo main.css está vinculado:

Continuamos construyendo la estructura para el cargador de archivos:

  
    
    
    
    
    
    
  
  
    

      
File Uploader JavaScript with Progress
      

        

            
            
            
Browse File to Upload
          
          

            

            

          
      
    
    
  

Luego, copie/pegue los siguientes códigos para actualizar main.css:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  min-height: 100vh;
  background: #cb67e9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Arial, Helvetica, sans-serif;
}
::selection {
  color: white;
  background: #cb67e9;
}
.file-upload__wrapper {
  width: 640px;
  background: #fff;
  border-radius: 5px;
  padding: 35px;
  box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.05);
}
.file-upload__wrapper header {
  color: #cb67e9;
  font-size: 2rem;
  text-align: center;
  margin-bottom: 20px;
}
.form-parent {
  display: flex;
  align-items: center;
  gap: 30px;
  justify-content: center;
}
.file-upload__wrapper form.file-upload__form {
  height: 150px;
  border: 2px dashed #cb67e9;
  cursor: pointer;
  margin: 30px 0;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  border-radius: 6px;
  padding: 10px;
}
form.file-upload__form :where(i, p) {
  color: #cb67e9;
}
form.file-upload__form i {
  font-size: 50px;
}
form.file-upload__form p {
  font-size: 1rem;
  margin-top: 15px;
}
section .row {
  background: #e9f0ff;
  margin-bottom: 10px;
  list-style: none;
  padding: 15px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 6px;
}
section .row i {
  font-size: 2rem;
  color: #cb67e9;
}
section .details span {
  font-size: 1rem;
}
.progress-container .row .content-wrapper {
  margin-left: 15px;
  width: 100%;
}
.progress-container .details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 7px;
}
.progress-container .content .progress-bar-wrapper {
  height: 10px;
  width: 100%;
  margin-bottom: 5px;
  background: #fff;
  border-radius: 30px;
}
.content .progress-bar .progress-wrapper {
  height: 100%;
  background: #cb67e9;
  width: 0%;
  border-radius: 6px;
}
.uploaded-container {
  overflow-y: scroll;
  max-height: 230px;
}
.uploaded-container.onprogress {
  max-height: 160px;
}
.uploaded-container .row .content-wrapper {
  display: flex;
  align-items: center;
}
.uploaded-container .row .details-wrapper {
  display: flex;
  flex-direction: column;
  margin-left: 15px;
}
.uploaded-container .row .details-wrapper .name span {
  color: green;
  font-size: 10px;
}
.uploaded-container .row .details-wrapper .file-size {
  color: #404040;
  font-size: 11px;
}

Ahora, el componente debería verse mejor en el navegador:

Agregar funcionalidad de carga

Para agregar la funcionalidad requerida para cargar en nuestro proyecto, ahora usamos el archivo app.js, donde escribimos códigos JavaScript que dan vida a nuestro proyecto.

Copia/pega lo siguiente en app.js:

const uploadForm = document.querySelector(".file-upload__form");
const myInput = document.querySelector(".file-input");
const progressContainer = document.querySelector(".progress-container");
const uploadedContainer = document.querySelector(".uploaded-container");
uploadForm.addEventListener("click", () => {
  myInput.click();
});
myInput.onchange = ({ target }) => {
  let file = target.files[0];
  if (file) {
    let fileName = file.name;
    if (fileName.length >= 12) {
      let splitName = fileName.split(".");
      fileName = splitName[0].substring(0, 13)   "... ."   splitName[1];
    }
    uploadFile(fileName);
  }
};
function uploadFile(name) {
  let xhrRequest = new XMLHttpRequest();
  const endpoint = "uploadFile.php";
  xhrRequest.open("POST", endpoint);
  xhrRequest.upload.addEventListener("progress", ({ loaded, total }) => {
    let fileLoaded = Math.floor((loaded / total) * 100);
    let fileTotal = Math.floor(total / 1000);
    let fileSize;
    fileTotal 
                          
                          

                            

                              ${name} | Uploading
                              ${fileLoaded}%
                            
                            

                              

                            
                          
                        `;
    uploadedContainer.classList.add("onprogress");
    progressContainer.innerHTML = progressMarkup;
    if (loaded == total) {
      progressContainer.innerHTML = "";
      let uploadedMarkup = `

${name} | Uploaded ${fileSize}

`; uploadedContainer.classList.remove("onprogress"); uploadedContainer.insertAdjacentHTML("afterbegin", uploadedMarkup); } }); let data = new FormData(uploadForm); xhrRequest.send(data); }

Lo que hemos hecho es poder leer un archivo que ha sido seleccionado usando el elemento de entrada del archivo y crear una nueva lista de archivos en el DOM. Cuando se carga el archivo, se muestra el nivel de progreso y, cuando se completa la carga del archivo, el estado del progreso cambia a Cargado.

Luego, también agregamos un uploadFile.php a nuestro proyecto para simular un punto final para enviar archivos. El motivo de esto es simular la asincronosidad en nuestro proyecto para que obtengamos el efecto de carga de progreso.

Conclusión

Ha sido increíble llegar hasta este punto de este artículo.

En este tutorial, ha aprendido cómo crear un componente de carga de archivos y agregarle una barra de progreso. Esto puede resultar útil cuando crea sitios web y desea que sus usuarios se sientan incluidos y tengan una idea de qué tan lenta o rápida va la carga de un archivo. No dudes en reutilizar este proyecto cuando lo desees.

Si te quedas atascado mientras sigues este tutorial, te sugiero que cargues tu proyecto en GitHub para obtener ayuda de otros desarrolladores o también puedes enviarme un mensaje privado, estaré encantado de ayudarte.

Aquí hay un enlace al repositorio de GitHub para el proyecto.

Recursos relevantes

• Documentos FontAwesome