Display cloud file on website - Firebase Basics Series - Part 10

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