Comment télécharger des fichiers sur le stockage Firebase à l'aide de React.js

Le stockage Firebase offre un moyen simple de stocker des données générées par l'utilisateur telles que des images, des vidéos et des fichiers audio. Il s'intègre à l'authentification Firebase, ce qui vous permet de contrôler qui a accès aux fichiers.

Vous pouvez stocker de grandes quantités de contenu à l'aide de Firebase, car il s'adapte automatiquement à vos besoins. Il est simple à utiliser avec un framework tiers comme la bibliothèque React JavaScript

Configuration du projet

Pour télécharger des fichiers vers Stockage Firebase, vous devez créer un formulaire Web permettant aux utilisateurs de sélectionner un fichier dans le système de fichiers.

Commence par créer une application React en utilisant create-react-app. Exécutez cette commande pour générer un projet React appelé firebase-upload:

npx créer-react-app firebase-upload

Pour rester simple, vous n'avez besoin que d'un bouton d'entrée qui accepte les fichiers et d'un bouton de téléchargement. Remplacer le contenu de App.js avec le code suivant.

importer {useState} depuis "réagir"
une fonctionApplication() {
 const [fichier, setFile] = useState("");
// Gère l'entrée monnaieun événementet état des mises à jour
une fonctionhandleChange(un événement) {
setFile(un événement.cibler.des dossiers[0]);
 }
retourner (
<div>
<type d'entrée="dossier" accepter="image/*" onChange={handleChange}/>
<bouton>Télécharger sur Firebase</button>
</div>
 );
}
exporterdéfaut application ;

Dans le code ci-dessus, le saisir Mots clés J'accepte L'attribut est défini pour n'autoriser que les images. Le handleChange() La fonction gère le changement d'entrée et met à jour l'état pour stocker le fichier sélectionné.

Configurer Firebase

Avant de télécharger le fichier sur le stockage Firebase, vous devez créer un projet Firebase.

Créer un projet Firebase

Suivez les instructions ci-dessous pour créer un projet Firebase :

1. Allez à la Base de feu page de la console et cliquez sur Ajouter un projet ou alors Créer un projet (si vous créez un projet pour la première fois).
2. Donnez à votre projet un nom de votre choix et cliquez sur Continuez.
3. Désélectionnez Google Analytics puisque vous n'en avez pas besoin pour ce projet et cliquez sur Créer un projet.
4. Cliquez sur Continuez une fois le projet prêt.
5. Clique sur le icône web sur la page de présentation du projet pour enregistrer une application Web.
6. Donnez un surnom à votre application et cliquez sur S'inscrire.
7. Copiez l'objet de configuration fourni. Vous en aurez besoin pour connecter votre application à Firebase.

Créer un bucket de stockage cloud

Firebase stocke les fichiers dans un bucket de stockage cloud. Suivez les étapes suivantes pour le créer :

1. Sur la page de présentation du projet, cliquez sur le Stockage onglet dans le panneau de navigation de gauche.
2. Cliquez sur Commencer et sélectionnez mode d'essai.
3. Sélectionnez l'emplacement du bucket de stockage par défaut et cliquez sur Fait.

Vous êtes maintenant prêt à commencer à télécharger des fichiers sur le stockage Firebase.

Ajouter Firebase pour réagir

Dans votre terminal, accédez au dossier de votre projet React. Exécutez la commande suivante pour installer le SDK Firebase :

npm installer base de feu

Créer un nouveau fichier, firebaseConfig.js, et initialisez Firebase.

importer { initializeApp } depuis "firebase/application" ;
importer { getStorage } depuis "base de feu/stockage" ;
// Initialiser Firebase
constante app = initializeApp ({
 clé API: <clé API>,
 authDomain: <authDomain>,
 ID de projet: <ID de projet>,
 compartiment de stockage: <stockageBucket>,
 messageSenderId: <messagerieSenderId>,
 ID d'application: <ID d'application>,
 ID de mesure: <ID de mesure>,
});
// Référence de stockage Firebase
constante stockage = getStorage (application);
exporterdéfaut stockage;

Utilisez l'objet de configuration que vous avez obtenu après avoir créé le projet Firebase pour initialiser l'application Firebase.

La dernière ligne exporte la référence de stockage Firebase afin que vous puissiez accéder à cette instance à partir du reste de votre application.

Créer une fonction de gestionnaire pour télécharger les images sur Firebase

Cliquer sur le bouton de téléchargement devrait déclencher la fonction responsable du téléchargement du fichier sur le stockage Firebase. Créons cette fonction.

Dans App.js, ajoutez la fonction poignéeTélécharger. Dans la fonction, vérifiez si le fichier n'est pas vide car un utilisateur peut cliquer sur le bouton de téléchargement avant de choisir un fichier. Si le fichier n'existe pas, déclenchez une alerte indiquant à l'utilisateur de télécharger d'abord un fichier.

une fonctionpoignéeTélécharger() {
 si (!fichier) {
 alerte("Veuillez d'abord choisir un fichier !")
 }
}

Si le fichier existe, créez une référence de stockage. Une référence de stockage agit comme un pointeur vers le fichier dans le Cloud sur lequel vous souhaitez opérer.

Commencez par importer le service de stockage que vous avez créé dans le firebaseConfig.js dossier.

importer stockage depuis "./firebaseConfig.js"

Importer réf à partir de l'instance de stockage Firebase et transmettez le service de stockage et le chemin du fichier en tant qu'argument.

importer {réf} depuis "base de feu/stockage"
une fonctionpoignéeTélécharger() {
 si (!fichier) {
 alerte("Veuillez d'abord choisir un fichier !")
 }
constante storageRef = réf (stockage, `/fichiers/${file.name}`)
}

Ensuite, créez une tâche de téléchargement en transmettant l'instance de stockage Firebase au uploadBytesResumable() une fonction. Il existe plusieurs méthodes que vous pouvez utiliser, mais celle-ci vous permet de suspendre et de reprendre un téléchargement. Il expose également les mises à jour de progression.

Le uploadBytesResumable() La fonction accepte la référence de stockage et le fichier à uploader.

importer {
 réf,
 uploadBytesResumable 
} depuis "base de feu/stockage" ;
une fonctionpoignéeTélécharger() {
si (!dossier) {
 alert("Veuillez d'abord choisir un fichier !")
 }
constante storageRef = réf (stockage, `/fichiers/${file.name}`)
constante uploadTask = uploadBytesResumable (storageRef, fichier);
}

Pour surveiller la progression et gérer les erreurs lors du téléchargement du fichier, écoutez les changements d'état, les erreurs et l'achèvement.

importer {
 réf,
 uploadBytesResumable,
 getDownloadURL 
} depuis "base de feu/stockage";
une fonctionpoignéeTélécharger() {
 si (!fichier) {
 alerte("Veuillez d'abord choisir un fichier !")
 }
constante storageRef = réf (stockage,`/fichiers/${file.name}`)
constante uploadTask = uploadBytesResumable (storageRef, fichier);
téléchargerTâche.sur(
"état_change",
 (instantané) => {
constante pourcentage = Math.tour(
 (instantané.bytesTransferred / instantané.totalBytes) * 100
 );
// Progression de la mise à jour
 setPercent (pourcentage);
 },
 (erre) => console.log (erreur),
 () => {
// URL de téléchargement
 getDownloadURL(uploadTask.snapshot.ref).then((url) => {
console.log (url);
 });
 }
 ); 
}

Ici le état_change event a trois fonctions de rappel. Dans la première fonction, vous suivez la progression du téléchargement et téléchargez l'état d'avancement. Dans la deuxième fonction de rappel, gérez une erreur si le téléchargement échoue.

La fonction finale s'exécute une fois le téléchargement terminé et obtient l'URL de téléchargement, puis l'affiche sur la console. Dans une application réelle, vous pouvez l'enregistrer dans une base de données.

Vous pouvez afficher l'état de progression du téléchargement à l'aide de l'état du pourcentage. Ajoutez également un sur clic événement sur le bouton de téléchargement pour déclencher le poignéeTélécharger une fonction.

importer { useState } depuis "réagir";
une fonctionApplication() {
constante [pourcentage, setPercent] = useState(0);
retourner (
<div>
<type d'entrée="dossier" onChange={handleChange} accepter="" />
<bouton onClick={handleUpload}>Télécharger sur Firebase</button>
<p>{pour cent} "% Fini"</p>
</div>
 )
}

Voici le code complet pour App.js:

importer { useState } depuis "réagir";
importer { stockage } depuis "./firebaseConfig" ;
importer { réf, uploadBytesResumable, getDownloadURL } depuis "base de feu/stockage" ;
une fonctionApplication() {
// État pour stocker le fichier téléchargé
 const [fichier, setFile] = useState("");
// le progrès
constante [pourcentage, setPercent] = useState(0);
// Gérer l'événement de téléchargement de fichier et l'état de mise à jour
une fonctionhandleChange(un événement) {
setFile(un événement.cibler.des dossiers[0]);
 }
constante handleUpload = () => {
 si (!fichier) {
 alerte("Veuillez d'abord télécharger une image !");
 }
constante storageRef = réf (stockage, `/fichiers/${file.name}`);
// la progression peut être interrompue et reprise. Il expose également les mises à jour de progression.
// Reçoit la référence de stockage et le fichier à uploader.
constante uploadTask = uploadBytesResumable (storageRef, fichier);
téléchargerTâche.sur(
"état_change",
 (instantané) => {
constante pourcentage = Math.tour(
 (instantané.bytesTransferred / instantané.totalBytes) * 100
 );
// Progression de la mise à jour
 setPercent (pourcentage);
 },
 (erre) => console.log (erreur),
 () => {
// URL de téléchargement
 getDownloadURL(uploadTask.snapshot.ref).then((url) => {
console.log (url);
 });
 }
 );
 };
retourner (
<div>
<type d'entrée="dossier" onChange={handleChange} accepter="/image/*" />
<bouton onClick={handleUpload}>Télécharger sur Firebase</button>
<p>{pour cent} "% Fini"</p>
</div>
 );
}
exporterdéfaut application ;

En faire plus avec le stockage Firebase

Le téléchargement de fichiers est l'une des fonctionnalités les plus élémentaires du stockage Firebase. Cependant, il y a d'autres choses que le stockage Firebase vous permet de faire. Vous pouvez accéder, afficher, organiser et supprimer vos fichiers.

Dans une application plus compliquée, vous souhaiterez peut-être authentifier les utilisateurs pour leur donner l'autorisation d'interagir uniquement avec leurs fichiers.

Authentification des utilisateurs avec Firebase & React

Lire la suite

A propos de l'auteur