web-dev-qa-db-fra.com

Stockez l'image dans Firebase Storage et enregistrez les métadonnées dans Firebase Cloud Firestore (Beta)

J'essaie de télécharger une image sur Firebase Storage et d'enregistrer certaines métadonnées sur le Firebase Cloud. Je code en JavaScript.

L'objectif est de définir également des métadonnées personnalisées sur Firebase Cloud, par exemple à partir d'un champ de saisie de texte que l'utilisateur doit remplir.

Voilà comment je stocke des images dans le stockage Firebase:

storageRef.child('images/' + file.name).put(file, metadata).then(function(snapshot) {
        console.log('Uploaded', snapshot.totalBytes, 'bytes.');
        console.log(snapshot.metadata);
        var url = snapshot.downloadURL;
        console.log('File available at', url);
        // [START_EXCLUDE]
        document.getElementById('linkbox').innerHTML = '<a href="' +  url + '">Click For File</a>';
        // [END_EXCLUDE]
      }).catch(function(error) {
        // [START onfailure]
        console.error('Upload failed:', error);
        // [END onfailure]
      });
      // [END oncomplete]
    }

Je ne sais pas comment intégrer dans la fonction de téléchargement une autre tâche pour écrire des métadonnées dans Firebase Cloud. Toute aide serait appréciée!

@eykjs @Sam Storie: Merci pour votre aide. J'ai changé mon code. En ce moment, il y a une erreur que je ne peux pas comprendre, ce qui ne va pas. Erreur: TypeError: undefined n'est pas un objet (évaluation de 'selectedFile.name')

Mon code:

var selectedFile;

function handleFileSelect(event) {
        //$(".upload-group").show();
        selectedFile = event.target.files[0];
};

function confirmUpload() {
        var metadata = {
                contentType: 'image',
                customMetadata: {
                        'dogType': 'Lab',
                        'title': $("#imgTitle").val(),
                        'caption': $("#imgDesc").val()
                },
        };
        var uploadTask = firebase.storage().ref().child('dogImages/' + selectedFile.name).put(selectedFile, metadata);
                uploadTask.on('state_changed', function(snapshot){
                
        }, function(error) {
        
        } );

}

Quel est le problème avec ma définition de fichier sélectionné? Merci beaucoup pour votre aide.

javascriptfirebasemetadatafirebase-storagegoogle-cloud-firestore
11
peachmeier

Vous pouvez peut-être télécharger les données vers Firestore après avoir terminé le téléchargement.

storageRef.child('images/' + file.name).put(file, metadata).then(function(snapshot) {
console.log('Uploaded', snapshot.totalBytes, 'bytes.');

let db = firebase.firestore();
let dbRef = db.collection("images").doc(file.name);

let setData = dbRef.set({
    //yourdata here
    downloadURl: snapshot.downloadURL
}).then( () => {
    console.log("Data stored in Firestore!");
});

// your actions
7
Eyk Rehbein

Si je comprends ce que vous recherchez, cela devrait facilement être fait avec les fonctions Firebase:

https://firebase.google.com/docs/storage/extend-with-functions

Vous pouvez déclencher une fonction lorsqu'un élément du stockage change, et ainsi écrire facilement des données dans la base de données en temps réel ou dans la nouvelle (er) base de données Firestore.

Voici un simple extrait de la page à laquelle j'ai fait référence pour voir à quoi cela pourrait ressembler:

exports.generateThumbnail = functions.storage.object().onChange(event => {
  // ...
});
1
Sam Storie

Source Lien

Téléchargement d'image dans Firestore et sauvegarde des méta-informations sur Stockage Cloud

enter image description here

import { AngularFireStorage, AngularFireUploadTask } from '@angular/fire/storage';
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore';
import { Observable } from 'rxjs';
import { finalize, tap } from 'rxjs/operators';

...
...
...

// The main task
this.task = this.storage.upload(path, file, { customMetadata });

// Get file progress percentage
this.percentage = this.task.percentageChanges();
this.snapshot = this.task.snapshotChanges().pipe(

  finalize(() => {
    // Get uploaded file storage path
    this.UploadedFileURL = fileRef.getDownloadURL();

    this.UploadedFileURL.subscribe(resp=>{
      this.addImagetoDB({
        name: file.name,
        filepath: resp,
        size: this.fileSize
      });
      this.isUploading = false;
      this.isUploaded = true;
    },error=>{
      console.error(error);
    })
  }),
  tap(snap => {
      this.fileSize = snap.totalBytes;
  })
)
0
Code Spy