Comment télécharger des fichiers sur le stockage Firebase à l'aide de JavaScript?
Ce guide vous aidera à configurer un compte, puis à utiliser l'API pour télécharger des fichiers sur le stockage Firebase.
Firebase est une plate - forme de développement d'applications Web et mobiles qui a été développée en 2011 et acquise plus tard par Google. Firebase fournit aux développeurs une large gamme de services et d'outils, dont certains sont gratuits. Il offre une fonction de stockage et une fonction de base de données qui réduit la dépendance du côté serveur et élimine le problème de la gestion des fichiers au strict minimum absolu. Ce guide vous aidera à configurer un compte, puis à utiliser l'API pour télécharger des fichiers sur le stockage Firebase.
Partie 1 sur 2: configuration de google firebase
- 1Configurez un compte Firebase. Créez un compte firebase si vous n'en avez pas déjà créé un. Rendez-vous sur la console et ajoutez un nouveau projet. Remplissez un bon nom et créez un projet.
- 2Ajoutez Firebase à votre application Web. Vous pouvez également ajouter Firebase à une application Android/application iOS. Si vous utilisez un framework javaScript pour créer votre application, les étapes doivent être assez similaires. Copiez les données de configuration dans votre code HTML, puis vous pouvez utiliser AJAX pour transférer les données dans votre stockage Firebase.
- 3Sélectionnez les options de stockage. Firebase vous permet de définir des règles sur la façon dont vous souhaitez stocker vos fichiers et de définir des contrôles d'accès sur eux. Les fichiers sont stockés dans Google Cloud Storage.
- Vous pouvez également stocker les références aux fichiers dans Firebase, puis utiliser une autre infrastructure de stockage cloud pour stocker réellement les fichiers. Par exemple, vous pouvez intégrer Firebase à Amazon S3 pour le stockage de fichiers ou à Cloudinary pour le stockage d'images javascript.
Cela peut être pris en charge dans la tâche de téléchargement en utilisant la méthode.catch() comme indiqué ci-dessous: tâche.
Partie 2 sur 2: création d'une interface pour le téléchargement de fichiers
- 1Configurer l'environnement. La plupart des principales bibliothèques JavaScript frontales telles que React, Angular et Vue ont des bibliothèques populaires qui les intègrent à Firebase. Si votre bibliothèque frontale dispose d'un module Firebase, comme AngularFire pour Angular, vous devriez envisager de l'utiliser. Dans cet article, nous allons écrire un script de téléchargement de fichiers AJAX pour envoyer des fichiers vers le stockage Firebase.
- 2Créez une référence de stockage Firebase dans votre application Web. Ceci est important si vous devez accéder au stockage Firebase.
const ref = firebase.storage().ref();
- 3Créez un champ de saisie. Une fois cela fait, accédez au fichier à télécharger à partir de l'entrée [type="file"]. Si vous utilisez jQuery, le code ressemblera à ceci.
fichier const = $('#photo').get(0).files[0]; - 4Préparez les fichiers. Avant de télécharger le fichier, vous devrez préparer le nom du fichier ainsi que les métadonnées du fichier que vous téléchargez. Il n'est pas recommandé d'avoir le nom de fichier comme seul identifiant. Un horodatage est un champ qui peut être ajouté au nom du fichier:
const name = (+new Date()) + '-' + file.name;
- 5Créez une tâche de téléchargement. Afin de générer la tâche de téléchargement du fichier, vous pouvez le faire à l'aide de la méthode.put (). Essentiellement, cette tâche est une promesse et, par conséquent, peut être effectuée plus tard avec la même facilité. La commande ici serait
tâche const = ref.child(nom).put(fichier, métadonnées);
La tâche de téléchargement de fichier prend également en charge un certain nombre de méthodes différentes, notamment task.resume(), task. annuler () et tâcher. pause().
- 6Récupérez la réponse à partir de l'URL. Vous pouvez utiliser une promesse pour obtenir une résolution lorsqu'une réponse est reçue.
task.then((snapshot) => {<br/> console.log(snapshot.downloadURL); <br/>}); - 7Attrapez les erreurs. Il est possible de rencontrer des cas d'erreurs qui nécessiteraient un dépannage. Cela peut être pris en charge dans la tâche de téléchargement en utilisant la méthode.catch() comme indiqué ci-dessous:
task.then((snapshot) => { document.querySelector('#someImageTagID').src = snapshot.downloadURL; }).catch((error) => { // Une liste d'erreurs peut être trouvée sur // https://firebase.google.com/docs/storage/web/handle-errors switch (error.code) { case 'storage/unauthorized': // L'utilisateur n'a pas la permission d'accéder à l'objet break; case 'storage/ cancelled': // L'utilisateur a annulé l'interruption du téléchargement;... case 'storage/unknown': // Une erreur inconnue s'est produite lors de la pause; } })
Dans cet article, nous allons écrire un script de téléchargement de fichiers AJAX pour envoyer des fichiers vers le stockage Firebase.
- Ajoutez plus d'utilisateurs à la base de données Firebase. Ceci est utile car il n'existe actuellement aucune solution de contournement pour exporter les données utilisateur Auth en masse. Une solution de contournement consiste à enregistrer les utilisateurs dans la base de données * Firebase lorsqu'ils s'inscrivent pour la première fois.
- L'URL de téléchargement du fichier téléchargé peut être enregistrée comme indiqué ci-dessus, ou alternativement, la référence Firebase peut également être enregistrée pour référence future.
- Assurez-vous que la logique Firebase est conservée côté serveur. Cela réduit les chances de verrouillage du fournisseur et sépare votre logique backend du front-end.
En parallèle
