Comment créer un téléchargeur de fichiers JavaScript ?

Le téléchargement de fichiers est une fonctionnalité de base de la plupart des projets Web d'aujourd'hui. Par exemple, des sites Web et des applications Web modernes tels que Facebook, LinkedIn, Twitter, Coursera et bien d'autres permettent aux utilisateurs finaux de télécharger des fichiers, tels que des images, des documents, des vidéos, etc. De plus, des outils en ligne tels que des outils d'édition d'images, des vérificateurs de plagiat, et les convertisseurs PDF vers Word permettent également aux utilisateurs de télécharger des fichiers. Parfois, les équipes internes ont besoin d'une fonctionnalité de téléchargement de fichiers pour télécharger des vidéos et des images de produits. Bien que la création d'un téléchargeur de fichiers puisse être difficile, aujourd'hui, plusieurs outils et bibliothèques tiers sont disponibles pour vous aider à implémenter rapidement une fonctionnalité de téléchargement de fichiers dans votre projet. Cependant, si vous cherchez à créer un téléchargeur de fichiers, plus précisément un téléchargeur JavaScript, à partir de zéro, cet article est le bon endroit.

Dans cet article, nous allons vous montrer comment créer un téléchargeur de fichiers JavaScript avec du JavaScript vanille ou du JavaScript pur sans utiliser de bibliothèques externes.

Quelles sont les fonctionnalités d'un téléchargeur de fichiers ?

Lorsqu'il s'agit de créer un téléchargeur de fichiers, nous devons créer un bouton de téléchargement de fichiers frontal qui permettra aux utilisateurs de télécharger les fichiers souhaités sur le site Web ou l'application Web. Nous pouvons également autoriser plusieurs téléchargements de fichiers et afficher des barres de progression pour une meilleure expérience utilisateur. De plus, nous devrions également afficher des aperçus d'image lorsqu'un utilisateur télécharge un fichier image. Une fois le fichier téléchargé, nous devons le lire, l'envoyer au backend et le stocker sur le serveur. Parfois, les utilisateurs téléchargent des fichiers volumineux, ce qui ralentit les téléchargements. Pour cette raison, il est préférable de télécharger des fichiers volumineux sur le serveur par blocs pour éviter les erreurs et améliorer la vitesse. Ces morceaux de fichiers sont plus faciles à gérer qu'un seul gros fichier.

De plus, les développeurs doivent créer un téléchargeur de fichiers efficace qui prend en charge les téléchargements rapides. Vous devez également vous assurer qu'un téléchargeur de fichiers est sécurisé pour empêcher les cyber-attaquants de déployer des logiciels malveillants et des virus sur votre serveur.

Comment créer un téléchargeur de fichiers JavaScript ?

Étape 1 : Configuration du côté serveur

Nous utiliserons le package HTTP intégré pour configurer le serveur Node.js. Nous allons commencer par créer un nouveau dossier pour le projet :

mkdir fileupload-service

Ensuite, nous allons créer un fichier index.js. Ce sera le point d'entrée de notre serveur.

Enfin, nous allons créer le serveur HTTP qui s'exécutera sur le port 8080

Étape 2 : Création du frontal du téléchargeur de fichiers JavaScript

Pour créer le frontal de notre téléchargeur de fichiers JavaScript, nous allons créer un fichier HTML de base qui affichera un bouton de téléchargement de fichier et acceptera les entrées de fichier des utilisateurs. Nous afficherons également l'état du téléchargement du fichier. Une fois que l'utilisateur clique sur le bouton, le processus de téléchargement de fichier sera lancé.

Pendant que nous créons un simple bouton de téléchargement de fichier, vous pouvez également modifier le texte du bouton ou changer la couleur du bouton à des fins de conception.

Ensuite, nous enverrons ce fichier depuis le backend :

Étape 3 : Lecture du fichier téléchargé sur le front-end

Pour lire le contenu du fichier sur le front-end, nous utiliserons l'objet 'FileReader'. Il permet aux applications Web de lire le contenu du fichier (stocké sur le système de l'utilisateur) de manière asynchrone. L'objet 'FileReader' propose plusieurs méthodes pour lire un fichier. Par exemple, nous pouvons lire le fichier téléchargé en tant que tampon de tableau ou en données binaires brutes. Nous pouvons même lire le fichier comme une URL de données. Ici, nous allons utiliser la méthode array pour lire le fichier :

Les fichiers sélectionnés sont accessibles sous le champ 'fichiers' pour la saisie :

L'objet 'FileReader' fournit également plusieurs écouteurs d'événements, tels que 'onprogress' et 'onload', pour suivre la lecture du fichier téléchargé sur le front-end. Ici, nous allons utiliser l'événement 'onload' :

Étape 4 : Envoi du fichier téléchargé au backend

Avant d'envoyer le fichier téléchargé par l'utilisateur au backend, il est préférable de le diviser en petits morceaux ou morceaux et d'envoyer les morceaux de fichier périodiquement, surtout si la taille du fichier est grande. En effet, le téléchargement de fichiers très volumineux peut entraîner des problèmes liés à la latence et à la vitesse. De plus, les cyber-attaquants téléchargent parfois des fichiers trop volumineux, ce qui peut entraîner un dysfonctionnement du serveur.

Donc, nous allons d'abord diviser le fichier en morceaux et les envoyer au backend un par un. Nous devons également nous assurer que nous envoyons les morceaux dans l'ordre afin que le fichier ne soit pas corrompu. Nous utiliserons également 'async await' afin de ne pas surcharger le serveur de requêtes.

Étape 5 : Stocker les morceaux de fichiers sur le serveur

Enfin, nous recevrons les morceaux et les stockerons sur le serveur.

C'est ça. Nous avons maintenant un téléchargeur de fichier unique complet pour les téléchargements de fichiers Javascript. Nous pouvons également activer plusieurs téléchargements de fichiers en utilisant l'option "multiple" :

<input type=”file” id=”files” multiple>

Nous allons diviser chaque fichier en morceaux un par un et les envoyer au backend.

Conclusion

Le téléchargement de fichiers est une fonctionnalité essentielle de nombreuses applications Web et sites Web modernes. Nous pouvons utiliser un outil de téléchargement de fichiers tiers, tel qu'une bibliothèque JavaScript ou une API de téléchargement de fichiers, pour implémenter rapidement un téléchargement de fichiers JavaScript dans nos applications. Cependant, vous pouvez également créer un téléchargeur de fichiers à partir de zéro comme vous le souhaitez. Par exemple, vous pouvez diviser des fichiers volumineux en morceaux et les envoyer au backend un par un. Dans cet article, nous avons créé un téléchargeur de fichiers JavaScript avec Vanilla JS à partir de zéro.