Store image in Firebase Storage and save metadata in Firebase Cloud Firestore (Beta)

Question

I am trying to upload an image to Firebase storage and save some specific metadata to Cloud Firebase. I am coding in JavaScript.

The goal is to set also configured metadata in Firebase Cloud, for example, from a text input field that a user must fill out.

The way I store images in Firebase storage:

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] } 

I have no idea how to integrate another task into the upload function to write metadata to Firebase Cloud. Any help would be appreciated!

@eykjs @Sam Storie: Thanks for all your help. I changed my code. Right now, there is a mistake that I cannot understand what happened. Error: TypeError: undefined is not an object (evaluation "selectedFile.name")

My code is:

 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) { } ); } 

What is wrong with my selectedFile definition? Thank you for help.

Answer 1

You may be able to upload data to Firestore after the download is complete.

 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 

Answer 2

If I understand what you need, this is easy to do using the Firebase functions:

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

You can activate the function when something in the repository changes, and thus easily write data to a real-time database or to a new (er) Firestore database.

Here is a simple snippet from the page I linked to to see how it might look:

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

Answer 3

Source Link

Upload images to Firestore and save metadata in the cloud

 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; }) )