Le téléchargement de fichiers dans une application est un composant essentiel que chaque développeur prend en compte lors du développement d'une application ou d'une page Web. Le téléchargement de fichiers signifie simplement qu'un utilisateur télécharge un fichier qui peut être une image, une vidéo ou un document, tout comme nous téléchargeons des images ou des vidéos sur notre Instagram et Facebook. Alors, voyons comment télécharger un fichier dans React.JS dans ce post, mais avant d'aller au processus, voyons ce qui réagit.JS est.

Réagir.JS est une bibliothèque JavaScript frontale populaire pour la création et la conception d'interfaces utilisateur pour les applications à une seule page. La partie la plus intrigante de la réact.JS est qu'avec l'aide, nous pouvons modifier les données sur une page Web sans recharger toute la page Web ou l'application. Réagir.Les fonctionnalités JS incluent la simplicité, le jeûne et l'évolutivité.

Conditions préalables

Avant de partir sur la partie codante de la façon de télécharger un fichier dans React.js Laissez-nous d'abord créer une réaction.projet JS. À cet effet, ouvrez Visual Studio Code Terminal ou Windows Command Invite et exécutez la commande mentionnée ci-dessous qui créera votre application avec le nom de téléchargement de fichiers:

$ npx create-react-appleupload

L'étape suivante consiste à modifier le répertoire dans le fichier que nous venons de créer qui est téléchargement de fichiers.

$ CD Fileupload

L'étape suivante consiste à installer Axios qui est un client HTTP basé sur des promesses et nous aidera à envoyer le fichier sélectionné à un serveur. Pour installer Axios, exécutez la commande ci-dessous dans le terminal:

$ npm installer axios

Maintenant que nous avons terminé avec la création des bases de notre application et l'installation d'Axios, nous ouvrons le Appliquer.js fichier et modifier ce fichier pour réaliser le téléchargement de fichiers dans React.js.

Téléchargement de fichiers dans React.js

La première partie consiste à concevoir votre page Web pour le téléchargement de fichiers. Pour cela, nous aurons besoin d'un en-tête et de deux boutons qui sont; Choisir le fichier et Télécharger. Lorsque l'utilisateur clique sur le Choisir le fichier bouton, il devrait être redirigé vers le choix d'un fichier dans le système informatique et lorsqu'ils cliquent sur le bouton Télécharger, le fichier choisi doit être téléchargé sur le serveur. Il convient également de noter que nous avons besoin d'un gestionnaire d'événements qui écoutera toutes les modifications apportées au fichier, donc nous avons utilisé sur le changement qui fait référence au onfilechange fonction. Maintenant, chaque fois que l'utilisateur sélectionne un fichier, le onfilechange La fonction sera déclenchée et l'état sera modifié en conséquence.

Maintenant que nous avons sélectionné un fichier et géré la modification de l'état, envoyons maintenant le fichier à un serveur dans un objet nommé FormData pour lequel nous avons installé Axios plus tôt.

// Importation d'axios
importaxiosfrom'axios ';
// Importation de réact et composant
Importer React, Component From'React ';
classApExtendSComponent
état =
// L'état de fichier est nul au début
SELECTFILE: NULL
;
// Lorsque l'utilisateur sélectionne un fichier, définissez l'état
onfileChange = event =>
ce.setState (selectedFile: événement.cible.fichiers [0]);
;
// Lorsque l'utilisateur Téléchargez le fichier, cette fonction doit s'exécuter
onfileupload = () =>
CONSFORMDATA = NEWFORMDATA ();
Données de formulaire.ajouter(
"mon fichier",
ce.État.fichier sélectionné,
ce.État.fichier sélectionné.nom
));
// Détails du fichier téléchargés du journal de la console
console.journal (ceci.État.selectedFile);
// L'utilisateur envoie un req au serveur
axios.post ("api / uploadfile", formdata);
;
rendre()
retour (

Téléchargeons des fichiers à l'aide de React.js

Télécharger


));


Exporter l'application par défaut;

Conclusion

Réagir.JS est une bibliothèque frontale gérée par Facebook et l'utiliser, nous pouvons développer des applications Web très rapides et évolutives. Dans une application comme Instagram ou Facebook, le téléchargement de fichiers est une fonctionnalité essentielle et chaque développeur doit savoir comment développer une application qui a la fonction de téléchargement de fichiers. Pour obtenir une prise sur le concept de téléchargement de fichiers, nous avons démontré comment télécharger des fichiers à l'aide de React.JS dans cet article et vous fournir le code et les captures d'écran sur la façon dont cela fonctionnera.