Le téléchargement de fichiers est très omniprésent dans toute application Web et lorsqu'il s'agit de télécharger des fichiers et des ressources sur Internet (sur un navigateur), les choses peuvent être quelque peu stressantes. Heureusement, avec HTML 5, les éléments de saisie qui sont généralement accompagnés d'un contrôle de formulaire pour permettre aux utilisateurs de modifier les données peuvent devenir très utiles pour simplifier le téléchargement de ressources.

Dans cet article, nous examinerons de plus près comment gérer les téléchargements de fichiers à l'aide de JavaScript Vanilla. L'objectif est de vous apprendre à créer un composant de téléchargement de fichiers sans avoir besoin d'une bibliothèque externe et également d'apprendre quelques concepts de base en JavaScript. Vous apprendrez également comment afficher l'état d'avancement d'un téléchargement au fur et à mesure.

Code source : comme d'habitude, vous pouvez bricoler le code source hébergé sur le dépôt GitHub pour le projet.

Configuration du projet

Tout d'abord, dans votre répertoire préféré, créez un nouveau dossier pour le projet :

$ mkdir file-upload-progress-bar-javascript

Après cela, créons maintenant les fichiers index.html, main.css et app.js dans lesquels nous écrirons tout le balisage de notre projet.

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

Nous pouvons maintenant commencer à construire la structure pour le téléchargement de fichiers en créant un modèle HTML de base avec les balises

et  :

Ensuite, nous ajoutons des styles de base pour le projet dans main.css :

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

Pour améliorer l'apparence de nos applications, nous utiliserons les icônes de la bibliothèque Font Awesome que nous pourrons ajouter à notre projet via un code de kit qui peut être créé sur le site Web officiel de la bibliothèque Font Awesome.

Maintenant, index.html est mis à jour et le fichier main.css est lié :

Nous continuons en construisant la structure du téléchargeur de fichiers :

  
    
    
    
    
    
    
  
  
    

      
File Uploader JavaScript with Progress
      

        

            
            
            
Browse File to Upload
          
          

            

            

          
      
    
    
  

Ensuite, copiez/collez les codes suivants pour mettre à jour 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;
}

Maintenant, le composant devrait être plus visible sur le navigateur :

Ajout d'une fonctionnalité de téléchargement

Pour ajouter les fonctionnalités requises pour le téléchargement dans notre projet, nous utilisons désormais le fichier app.js, dans lequel nous écrivons les codes JavaScript qui donnent vie à notre projet.

Copiez/collez ce qui suit dans 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); }

Ce que nous avons fait, c'est pouvoir lire un fichier qui a été sélectionné à l'aide de l'élément d'entrée de fichier et créer une nouvelle liste de fichiers sur le DOM. Lorsque le fichier est en cours de téléchargement, le niveau de progression est affiché et lorsque le téléchargement du fichier est terminé, l'état de progression passe à téléchargé.

Ensuite, nous ajoutons également un uploadFile.php à notre projet pour simuler un point de terminaison pour l'envoi de fichiers. La raison en est de simuler l'asynchronité dans notre projet afin que nous obtenions l'effet de chargement de la progression.

Conclusion

Vous avez été formidables pour arriver jusqu'à ce point de cet article.

Dans ce didacticiel, vous avez appris à créer un composant de téléchargement de fichiers et à y ajouter une barre de progression. Cela peut être utile lorsque vous créez des sites Web et souhaitez que vos utilisateurs se sentent inclus et aient une idée de la lenteur ou de la rapidité du téléchargement d'un fichier. N'hésitez pas à réutiliser ce projet quand vous le souhaitez.

Si vous êtes bloqué en suivant ce tutoriel, je vous suggère de télécharger votre projet sur GitHub pour obtenir l'aide d'autres développeurs ou vous pouvez également m'envoyer un DM, je serai heureux de vous aider.

Voici un lien vers le dépôt GitHub du projet.

Ressources pertinentes

• Documents FontAwesome