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 d'entrée qui viennent généralement avec un contrôle de formulaire pour permettre aux utilisateurs de modifier les données peuvent devenir très pratiques pour simplifier le téléchargement des ressources.
Dans cet article, nous verrons de plus près comment gérer les téléchargements de fichiers à l'aide de JavaScript vanille. 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 à afficher l'état d'avancement d'un téléchargement au fur et à mesure.
Commençons, les amis!
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 index.html, main.csset la
app.js fichiers où 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 du fichier en créant un modèle HTML de base avec ainsi que les tags:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>File Upload with Progress Bar using JavaScript</title>
</head>
<body></body>
</html>
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 pouvons 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 main.css le fichier est lié :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script
src="https://kit.fontawesome.com/355573397a.js"
crossorigin="anonymous"
></script>
<link rel="stylesheet" href="main.css">
<title>File Upload with Progress Bar using JavaScript</title>
</head>
<body></body>
</html>
Nous continuons en construisant la structure du téléchargeur de fichiers :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script
src="https://kit.fontawesome.com/355573397a.js"
crossorigin="anonymous"
></script>
<link rel="stylesheet" href="main.css" />
<title>File Upload with Progress Bar using JavaScript</title>
</head>
<body>
<div class="file-upload__wrapper">
<header>File Uploader JavaScript with Progress</header>
<div class="form-parent">
<form action="#" class="file-upload__form">
<input class="file-input" type="file" name="file" hidden />
<i class="fas fa-cloud-upload-alt"></i>
<p>Browse File to Upload</p>
</form>
<div>
<section class="progress-container"></section>
<section class="uploaded-container"></section>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
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 ressemble à ceci sur le navigateur :
Consultez notre guide pratique et pratique pour apprendre Git, avec les meilleures pratiques, les normes acceptées par l'industrie et la feuille de triche incluse. Arrêtez de googler les commandes Git et en fait apprendre il!
Pour ajouter la fonctionnalité requise pour le téléchargement dans notre projet, nous utilisons maintenant le app.js fichier, où nous écrivons des 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 < 1024
? (fileSize = fileTotal + " KB")
: (fileSize = (loaded / (1024 * 1024)).toFixed(2) + " MB");
let progressMarkup = `
${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 est de pouvoir lire un fichier qui a été sélectionné à l'aide de l'élément file input et de créer une nouvelle liste de fichiers sur le DOM. Lorsque le fichier est en cours de téléchargement, le niveau de progression s'affiche et lorsque le fichier est entièrement téléchargé, l'état de progression passe à téléchargé.
Ensuite, nous ajoutons également un uploadFile.php à notre projet pour se moquer d'un point de terminaison pour l'envoi de fichiers. La raison en est de simuler l'asynchronosité dans notre projet afin d'obtenir l'effet de chargement de la progression.
<?php
$file_name = $_FILES['file']['name'];
$tmp_name = $_FILES['file']['tmp_name'];
$file_up_name = time().$file_name;
move_uploaded_file($tmp_name, "files/".$file_up_name);
?>
Conclusion
Vous avez été formidable de passer à ce point de cet article.
Dans ce didacticiel, nous avons 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 que vous 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 si vous le souhaitez.
Si vous êtes bloqué en suivant ce didacticiel, je vous suggère de télécharger votre projet sur GitHub pour obtenir l'aide d'autres développeurs ou vous pouvez également envoyer un dm.
Voici un lien vers la Dépôt GitHub pour le projet.
