So the first question in which database should you use to upload the images? 🤔, cause we have both Firestore
and Realtime Database
in the Firebase, but we are not going to upload the images directly to the Firestore or Realtime Database due to limited size for each "Document" which is "1MB" 😬
set by Firebase, hence we are going to upload the image files to the Firebase Storage
and then will take the Download URL and add that URL to the Firestore (or Realtime DB) 😋
TLDR;
import Firebase from 'Firebase'
import { v4 as uuid } from "uuid";
export default function Somefunction(){
const storage = firebase.storage()
const db = firebase.firestore()
const upload = () => {
const storageRef = storage.ref();
const Imageref = storageRef.child(
`images/${uuid()}-${Image.name}`
);
await Imageref.put(Image);
const ImageFileUrl = await Imageref.getDownloadURL();
await db.collection("ImageUrls").add({
image : ImageFileUrl
})
}
return()
}
PS: we are going to use React for this example
First Step: Setting our main file
Second Step: Writing our upload function
Third Step: Now we have a problem of repetition of the Image References if we upload images of same names or uploading the same image multiple times while will lead to failure in fetching Images with same names, so to fix that we will be using uuid
(NPM Package)
Fourth Step: Since all the things are done, now the only thing left is to add the ImageFileUrl
to Firestore
Yayyyyy, you have successfully uploaded the image and added it to the Firestore 🎉
Thanks for reading this far, I hope y'all will love this 😊
Top comments (0)