Firebase Storage - Upload image to firebase storage and create a link to that in realtime database
Solution 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
Solution 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
Benjamin Sommer
Updated on July 09, 2022Comments
-
Benjamin Sommer almost 2 years
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
-
Benjamin Sommer over 6 yearsYes but I'm mainly looking for info on how to upload images easily
-
Peter Haddad over 6 yearswell this: firebase.google.com/docs/storage/web/upload-files is the only way. After that you can implement my answer below
-
Asad Ali Choudhry over 4 yearsHave a look at this utility class to upload images, videos, and files to Firebase Storage. handyopinion.com/…
-
-
Thomas David Kehoe over 5 yearsI think you meant put(), not push().
-
Peter Haddad over 5 yearsNo push() to create a randomid and then set the image under it