Sorry about posting this one late I was working on this and drafted it for a while and thinking to post this one everyday and finally did it today.
Sorry for my procrastinating issues.
In the last post we were able to check whether our file is uploaded or not and also checked the upload process using a progress bar.
Now, when the file is uploaded after that we will create a entry in firestore database then we will be able to display the uploaded content on the website.
Adding data to firestore
In order order to get the files first we need to store details about the file and we will be using firestore database to store the file data.
The Data we will be saving for our Photogram Project will be
- Uploaded By (Name and UID)
- user id (uid)
- heading for the post
- Post Id
- Upload Time
- File Download Link
We have to update the database whenever new file is uploaded so we will create a function which take the download link and username then add the data to firestore.
We will call the function from the complete
uploadTask.on('state_changed',
(snapshot) => {
// Handle upload Progress
},
(error) => {
// Handle unsuccessful upload
},
() => {
//Handle complete upload
task.snapshot.ref.getDownloadURL().then((downloadURL) => {
updateDatabase(downloadURL, firebase.auth().currentUser);
});
}
);
And the update function will simply add the data to the database,
// Update Database Function
const db = firebase.firestore();
const dbRef = db.collection('posts');
const updateDatabase = (link,user) => {
let post = {
postid : makeid(7),
heading:headingPhoto.value,
By : user.displayName,
uid : user.uid,
img : link,
time : firebase.firestore.FieldValue.serverTimestamp()
}
dbRef.add(post)
}
I use a snippet to generate random code which i got from here
const makeid = (length) => {
var result = '';
var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
var charactersLength = characters.length;
for ( var i = 0; i < length; i++ ) {
result += characters.charAt(Math.floor(Math.random() *
charactersLength));
}
return result;
}
Displaying data
There will be two page which will be displayed one in which all feeds will be visible and another in which only the posts in current user profile will be shown.
For that we will be using the .where query to get data in all feed we will display all posts and in user profile we will change it to .where('uid','==',user.uid)
By default we will subscribe to the all photos snapshots but if user select Profile we will unsubscribe to all and subscribe to the profile one so that if user uploads something, it's visible on the page.
var allfeedStatus = false;
var userfeedStatus = false;
// sub all will subscribe to all feed
subAll = () => {
if(allfeedStatus == false){
allfeed = dbRef.onSnapshot((querySnapshot) => {
photoContainer.innerHTML = ''
querySnapshot.forEach((doc) => {
drawPhotos(doc.data().img,doc.data().By,doc.data().heading);
});
});
allfeedStatus = true;
userSection.hidden = true;
}
if(userfeedStatus){
userfeed();
userfeedStatus = false;
}
}
// sub profile will subscribe to the profile feed
subProfile = () => {
if(userfeedStatus == false){
userfeed = dbRef.where('uid','==',auth.currentUser.uid).onSnapshot((querySnapshot) => {
photoContainer.innerHTML = ''
querySnapshot.forEach((doc) => {
drawPhotos(doc.data().img,doc.data().By,doc.data().heading);
});
});
userSection.hidden = false;
userfeedStatus = true;
}
if(allfeedStatus == true){
allfeed();
allfeedStatus = false;
}
}
subAll();
Also create a function draw post which will add the posts to the page.
Let's Test
The website is working and is hosted on firebase hosting check it on the link : photogram-on.web.app
Get the codes from my github repo : Photogram Github Repo
Follow me for more
Top comments (0)