O upload de arquivos é muito onipresente em qualquer aplicativo da web e quando se trata de fazer upload de arquivos e recursos pela Internet (em um navegador), as coisas podem ser um tanto estressantes. Felizmente, com o HTML 5, os elementos de entrada que geralmente vêm com controle de formulário para permitir que os usuários modifiquem os dados podem se tornar muito úteis para simplificar os recursos de upload.

Neste artigo, veremos mais de perto como lidar com uploads de arquivos usando JavaScript vanilla. O objetivo é ensinar como construir um componente de upload de arquivo sem a necessidade de uma biblioteca externa e também aprender alguns conceitos básicos de JavaScript. Você também aprenderá como mostrar o status do progresso de um upload conforme ele acontece.

Código-fonte: como de costume, você pode alterar o código-fonte hospedado no repositório GitHub do projeto.

Configuração do projeto

Em primeiro lugar, no diretório de sua preferência, crie uma nova pasta para o projeto:

$ mkdir file-upload-progress-bar-javascript

Depois de fazer isso, vamos criar os arquivos index.html, main.css e app.js onde escreveremos toda a marcação do nosso projeto.

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

Agora podemos começar a construir a estrutura para o upload do arquivo criando um modelo HTML básico com tags

e :

Em seguida, adicionamos estilos base para o projeto em main.css:

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

Para melhorar a aparência de nossas aplicações, usaremos os ícones da biblioteca font awesome que podemos adicionar ao nosso projeto através de um código de kit que pode ser criado no site oficial da biblioteca font awesome.

Agora, index.html é atualizado e o arquivo main.css está vinculado:

Continuamos construindo a estrutura para o uploader de arquivos:

  
    
    
    
    
    
    
  
  
    

      
File Uploader JavaScript with Progress
      

        

            
            
            
Browse File to Upload
          
          

            

            

          
      
    
    
  

Em seguida, copie/cole os seguintes códigos para atualizar 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;
}

Agora, o componente deve ficar melhor no navegador:

Adicionando funcionalidade de upload

Para adicionar a funcionalidade necessária para upload em nosso projeto, agora fazemos uso do arquivo app.js, onde escrevemos códigos JavaScript que dão vida ao nosso projeto.

Copie/cole o seguinte em 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); }

O que fizemos foi poder ler um arquivo que foi selecionado usando o elemento de entrada file e criar uma nova lista de arquivos no DOM. Quando o arquivo está sendo carregado, o nível de progresso é mostrado e, quando o upload do arquivo é concluído, o status do progresso muda para carregado.

Em seguida, também adicionamos um uploadFile.php ao nosso projeto para simular um endpoint para envio de arquivos. A razão para isso é simular a assincronia em nosso projeto para que possamos obter o efeito de carregamento do progresso.

Conclusão

Você foi incrível em chegar até este ponto deste artigo.

Neste tutorial, você aprendeu como construir um componente de upload de arquivo e adicionar uma barra de progresso a ele. Isso pode ser útil quando você cria sites e deseja que seus usuários se sintam incluídos e tenham uma noção de quão lento ou rápido está sendo o upload de um arquivo. Sinta-se à vontade para reutilizar este projeto sempre que desejar.

Se você tiver dúvidas ao seguir este tutorial, sugiro que carregue seu projeto no GitHub para obter ajuda de outros desenvolvedores ou também pode me enviar um dm, ficarei feliz em ajudar.

Aqui está um link para o repositório GitHub do projeto.

Recursos relevantes

• Documentos FontAwesome