Firebase Storage - Upload image to firebase storage and create a link to that in realtime database

Question

I am having trouble uploading an image to firebase storage. I need to have an input object in the HTML with a type of file. Then I need the image selected for that input to be uploaded to the firebase storage for my project. Is there also a way to store the location of that image in the real-time database so it can be accessed later? How would I do this?

Thank you in advance

Answer 1

to link to the database try this:

var ref= firebase.database().ref("Uploads");
var storage = firebase.storage();
var pathReference = storage.ref('images/stars.jpg');
pathReference.getDownloadURL().then(function(url) {
ref.push().set({
imgurl: url
});

more info here:

https://firebase.google.com/docs/storage/web/download-files

https://firebase.google.com/docs/storage/web/upload-files

after adding it to the storage, you will be able to get the url using getDownloadUrl() and then add it in the db:

Uploads
  pushid
     imgurl: url

Answer 2

Check example application using Firestore(Storage) to save image file and using Cloud Storage(Database) to save image path, name, and file size.

Upload Image

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

Save Image Info

  addImagetoDB(image: MyData) {
    //Create an ID for document
    const id = this.database.createId();

    //Set document id with value in database
    this.imageCollection.doc(id).set(image).then(resp => {
      console.log(resp);
    }).catch(error => {
     console.log("error " + error);
    });
  }

Source tutorial Link